Add redux-actions as a Dependency of a React and Redux App
In this lesson, we’ll review the React and Redux application we’ll be working with and install redux-actions as a project dependency using the yarn package manager.
Instructor: [00:00] Here we have a simple Todo application running in the browser. This app was built using React and Redux. We can see in the Redux DevTools that the initial load of the application has dispatched a few actions.
[00:10] We can use the Redux DevTools to see the process that happens when we load this page. If we take a few steps back, we'll see that initially we're showing this loading indicator, then our Todos are loaded asynchronously and passed into this load Todos action. I'm just going to update our state to include those items.
[00:29] We dispatch an action to hide the loader. We also have a controlled input. As I type text in, we'll see that this update current action is dispatched for each character like it's typed in. If I press enter to submit the form, we'll show the loader.
[00:44] When that item comes back from our server, we'll add the Todo and then hide the loader. We can also toggle. We'll see actions dispatched for that. We can delete an item, and actions will be dispatched for that as well.
[00:58] Everything here is being controlled by Redux. Let's take a look at the code that drives the state management.
[01:03] I have this single reducer file and I've collocated all the action constants, the action creators, the reducer, and the initial state -- just to make our lives easier.
[01:15] At the top, we have an import statement that's pulling in four functions from our Todo services file, and this handles our asynchronous calls to our server. We have an initial state with an empty Todo's array, a current Todo which is a blank string, isLoading is set to true, and we have an empty message.
[01:31] We have action constants created for the actions that we need to dispatch, and then we have some action creator methods that will take in a value and creator action object for us with the type in the payload.
[01:43] We have a few functions that handle our Redux func action creators, and these will dispatch actions handle asynchronous code, and then dispatch again once that's complete. We have fetch Todos, one for saving a Todo, a toggle, and a delete. We have getVisibleTodos which is used in conjunction with React router to handle our filtering links.
[02:06] Our default export is a reducer function. This has our switch, which switch is on the action type, and based on the action type, it will return a new state with the appropriate updates.
[02:16] We want to maintain the same functionality that we have, but we want to reduce some of this boilerplate. Back up at the top, for example, we want to be able to reduce the amount of code that we need to create these actions. We are going to do this and a couple of other optimizations using the redux-actions library.
[02:33] To start, we need to install that as dependency for our project. In the terminal, I am going to use yarn add redux-actions. Now we have the redux-actions library available to help us reduce some of the boilerplate in our reducer file.