In a React app, data is fetched in the parent component and then passed down to child components through props.
Things get complicated when there are many layers of components and data/state (and the functions that modify this state) are passed through numerous components to get from origin to destination. This path can be difficult to remember and it leaves many places for errors to be introduced.
With Redux, any component can be connected directly to state.####
This isn’t to say that data is no longer passed down from parent components to child components via props. Rather, this path can now be direct, no passing props down from parent to great-great-great-great-great-great-grandchild.
It’s not good practice to have all components connect to application state. It is best to have parent/container components connect to state and pass state directly to children.
The underlying principles are so darn easy!
What is Redux?
It is basically your state management library, commonly paired with React, where it takes control of state away from React components and give it to a centralized place known as a ‘store’.
This time, when a component initiates a change, that information goes straight from it (the blue circle) to our store. From there, the change is then communicated directly to all the components that need to update.
Before jumping into the code, it’s useful to think about how Redux is working conceptually. The diagram below illustrates a typical Redux flow.
1. Store: A Redux Store holds your application’s state. It is where you will find three critical methods:
- (a) getState() — which allows access to the state object
- (b) dispatch(action) — which allows state to be updated
- (c) subscribe(listener) — which registers listeners, allowing code to trigger every time a change takes place.
2. Actions: In Redux, actions provide information to the store. Although Redux is different from an MVC framework, I would say that an action is basically the equivalent of a model in MVC. It has two parameters:
const ADD_TODO = {
type: “ADD_TODO”,
payload: “Do stuff”
}The first is type, which must always be present. The payload key can really be anything that is descriptive of the data being passed. With this data in the action, reducers will do the job of modifying the application’s state.
3. Reducers: A reducer takes an action and based on action type. It will decide what needs to be done with the data (ie. how will it effect your application’s state). Reducers are where application state gets update.
4. State: Finally, state is contained within the store. It is a concept you should be familiar with from React. In short, it is an object that represents the dynamic parts of the app: anything that may change on the client-side.
Now let’s create a simple app with Redux:
Hurray!
If that didn’t get you excited, I don’t know what will. I’m super excited for it!
We’ll begin with a simple example. Ensure you have Node.js installed, then type the following into your terminal:
Step-1
Create a new react app:
Step-2
Install dependencies:
Step-3
Create the necessary files and folders manually and make sure your folder structure is the same as mine:
Step-4
To set up our UI, create a file called src/components/posts.js and paste in the following code:
actions.js:
We’ll start by defining our actions. An action can be an object or, simple string.
Ideally, you should create another file for your action types.
reducer.js
Next, we need to specify how the application’s state should change in response to each action. This takes two arguments:
- a state;
- an action, which defines how we go about changing state.
Note that it’s common to use switch statements to distinguish action types here, but regular if and else statements will work fine too.
store.js
When all that’s done, we’ll need to import the createStore function from 'redux' and pass in our reducer, like so:
App.js
Now that we’ve exported our store we need to import it into App.js , by passing it into React-Redux’s Provider component:
This means that any child of the Provider component can access our store and, therefore, our actions and reducers.
Finally, we need to connect our component to our store, which we can do by importing connect (which is a higher order function) from the react-redux module:
The connect function must be used to export any component that needs to access to change Redux state.
Adding Redux DevTools
A final useful step to working with Redux is to install and initiate Redux’s own development tools.
If you’re using Chrome, you can enable Redux DevTools by following the link below:
Wrapping up
What a journey! I hope you learned something from this guide. Tried my best to keep things as simple as possible. Pick Redux, play with it and take your time to absorb all the concepts.
Thanks for reading and happy coding! :)