What? Redux is a state management tool for Javascript applications. It stores state in a separate component and allows you to access any part of state from any component without having to pass things from parent to child in the form of props. It also allows you to update state from anywhere in your application by using “actions”. When your application starts to scale up and you are needing to use pieces of information in multiple components, passing things down as props can make your code be over saturated. Redux helps solve that problem.
Why? It is more manageable to access global state across your entire application without the need to pass down from relative components.
When? Not all projects need to use redux. But if your application has complex ways of updating state, many people will be collaborating on the same code, and you will need access across your application, redux will be a useful tool.
How to use redux…
First let’s walk through the steps necessary to use redux, then we will go through implementation and see how it works in action. Redux works by having your state in a store. A store is an object that is able to have certain methods called on it. Store needs to be available throughout the project by passing it to a Provider component. Our entire project needs to be wrapped in redux.
To do this, we navigate to our highest file, usually ‘index.js’ and we have to do a few things. First, make sure we have our necessary imports. For us to use our store we will create it, in a separate file, and import to index.js. We also import { Provider } from ‘react-redux’. Second, wrap our app in our Provider. Third, create our store that will store our state.
Remember, Provider is simply a component of redux that will make your store available to any component. Make a separate file for your store, to stay organized. You can call it ‘store.js.’ Inside of this file we will create our store. Here we need to import { createStore } from ‘redux’ as well as the reducers we will be using to mutate our state. In this store file we will assign state to the initial state that will be in each reducer.
