Redux is a tool that developers use to make their lives easier. As many of you might have heard, its job is “state management”.
in React, we won’t be able to share data from one component or container to another unless there is a relationships between a parent to a child. As you can see on the above picture. We can’t share data between User Component and Main Component because they are sister components which means that they don’t have parent or child relationship.
in this case, if we want to share data’s, we could be able to share data from App Component to User Component and Main Component, but not the other way from User Component to App Component, the data goes down way.
if our project has many components or containers, it would be tough to carry data’s from Main Component to Other Components, it would be a lot of steps to carry them step by step. Like in below picture, if we need to carry the data from App Component to Other Component, we need to carry the data from Main to User and then carry to the Other Component. As you can imagine, if you have a bigger projects this will go more and beyond.
So, redux comes in handy in those situations that you could have one store and collect all the information in there and then share that info to all the components and containers without looking parent or child component.
So, how we create a store ? here is how we make a store.
let store= createStore(rootReducer,composeEnhancers(applyMiddleware(thunk)))
after creating our store in index.js, we connect our reducers to the store. As you can see on line 34.
ok, we have a store anymore. So, we dispatch App.js to create action, this action has type attribute to where to go in actor reducer , when action goes to reducer, action knows what to do. After creating reducer, that will go to the store which we have only one store and connect this reducer to store. Let’s have an example,
We have post action, with this we trying to add one more actor to our site. After we do the function we have dispatch on line 12. That is for actor reducer. our system does post request, it goes to reducer, and find case ‘ADD_ACTOR, which we had in our action, and it reorganize the state for us. as you can see on line 11 and line 12.We are returning prevState and adding our payload which is coming from action, and adding to that to actors array.
after doing those steps, we have to call the action in one of our component or container where we can get the data for adding a new actor, in this case I have an actor input component that where I create a new actor.
above picture is from actorInput component, and I import addActor action to use that action and importing connect from react-redux the reducer to store.
So, next step is line 115, which is connecting addActor function to ActorInput
I added this way, but just for example you could also to this other way, which typing as new const mdp =dispatch => {
…
}
like this below picture. This picture is only demonstration, not really related to our example creating new actor.
and I have handleSubmit function which you could see on the above picture inside the actionInput component, submit button has this function, so, after adding a new actor info’s , handleSubmit function runs this.props.addActor(this.state) and this new actor to state.
Resources
https://www.smashingmagazine.com/2018/07/redux-designers-guide/
