Redux

Redux is one of my favorite things to use when working with JavaScript and React. Redux is used primarily for application state management. Using Redux, we are able to maintain the entire state of an application in a single object. We often call this the store. There are a few things we will need to setup our React app for redux. For starters we need to install everything.

Installing redux is fairly easy.

I use npm install personally. Another thing we will need is react-redux

Similar to just redux I personally us npm install react-redux. Once these are installed when then need to import what we need to setup the store where our state is kept and managed.

We do this by importing createStore from redux. Then set a variable of store using const equal to createStore. Next it is important to import provider from react-redux too. Provider makes the redux store available to all nested components. In this case we are putting provider around the App component which has the entire app nested within. This allows all components that need access to state to have access with deemed necessary.

Another piece of the puzzle you may have noticed is the manageStore import. This is the reducers used to alter state. A reducer is pure function that takes an action and the previous state of the application and returns the new state.

The reducer above is an example of how a reducer can look. The reducer takes in actions in this case from fetch calls and based on the case, alters the previous state and returns a new state. Once this is setup redux is basically available to use on your React.js app.