We use props to access and transfer the data between components , There could be a situation where we have more complicated nested components and that is the time you don’t want to use props because it will be complete mess which is called prop drilling like the image blow:
In this image you see that we have to pass the data through so many components to give it to textContent component.
the best way to pass data is global state management like redux.
Redux is a library to manage global state ,we use redux in libraries and freamworks like react , angular ,…
in this article I will get you through redux concepts and how it works and how we can really use it( i know some people who know redux concepts but don’t know how to use it).
so I just keep going step by step to use it and explain the concept meanwhile.
1.install packages and libraries that you need
npm install redux react-redux redux-thunk
we use redux to create store and react-redux is just the way for react to communicate with redux, e.g: updating global state , reading global state ,... and we use redux-thunk for our actions to be able to work asynchronously, because redux doesn’t like asynchronous process by itself , so it needs redux-thunk.
2.creating redux folder in your project
redux folder contains two folders named actions and reducers
1.actions folder contains one file named index.js which includes all of our different actions like this one:
As you can see it is a function for specific purpose like the example above (get product details) And at the end it dispatch an object with type(the unique name) and the payload(data), this object is called action that is dispatched to reducer and all actions is written like this(of course you can change “payload” and “type” property to anything you want).
maybe you saw the function returns another function which is async in above example! and that’s the structure you want to use for async actions when using redux-thunk and for the synchronous actions you don’t have to return another async function.
this is a sync and simple action:
2.reducers folder contains files named xxxReducer.js( you can replace xxx with anything you want) and one index.js file.
We can use xxxreduce.js files directly and there will be no need to index.js but due to cleaner file structure and easier access to all of data we use index.js this way:
By using combineReducer we get all data returned from reduces together in one RootReducer object with different properties for each specific data.
in the above image, you can see the data returned from productsReducer is set to products property and the productsDetailsReducer to productDetails property, so we can access these different data with their property names anywhere we want
let’s take a look at one of the reducers file content:
xxxReducer file includes a function that receives two parameters, the first parameter is state which needs an initial value that is an empty object in the above image and the second parameter is an action which is the object dispatched from action function ({type:…, payload:…})
this function uses the switch to check the action type and returns its data(payload) depending on its type, and if there is no type it will return the initial state and if you remember, the returned data from this reducer is going to be set to a RootReducer object property by combineReducer
3. Creating store and provider in root file(src/index.js)
we need to perform a process in the root file(src/index.js) due to access global data which come from actions and reducers
just like the above image we need to create the store with createStore function which receives two parameters, the first is rootReducer which has been created by combineReducer and the second parameter is applyMiddleware which is a function with thunk parameter which makes redux accept the async actions.
and finally, we wrap our App component(parent of all nested components) with a provider that comes from react-redux and this is a way to connect react with redux to access global data by passing a prop to provider named store and the value is the store that we have created with createStore.
4. Using actions and reducers
Well, if I want to be brief, we either want to dispatch an action to update the data or read the updated data from the global state.
1.dispatch an action to update a data:
As you can see in the above image if we want to use an action we import it from the actions/index.js file and then we dispatch this action by using useDispatch that comes from react-redux.
2.read the updated data from global state:
Well, if you remember, in the above examples in rootReducer, we put the data returned from one of the reducers on the productDetails property, and in the image above, we can see that we can use useSelector that comes from react-redux to perform a callback that takes a parameter that is rootReducer ( In the picture above with the name state) and from this state, we get exactly the data we want and display it in the UI just as easily!
let’s take a look at the whole process we got through:
If you’re not tired stay with me with a brief tutorial for redux persist that just takes one file to edit. but first of all, what is redux-persist?
I’m sure in some cases most of you want to hold the data in state and just not let them disappear with refresh and that’s what redux-persist does, it takes the data from rootReducer and stores it in localStorage, and with any refresh, data is still there!
to add and use this package in your redux process, you need two steps :
1.npm install redux-persist
2.edit the root file(src/index.js) like this:
Import anything you need from this package just like the above image.
persistConfig object is the way you say to redux-persist to how and what to save in localStorage, e.g we use blackList property which is an array of reducer property names in rootReducer to tell redux-persist not to save its data in local storage.
persistedReducer variable is a function named persistReducer which receives persistConfig and root reducer to save rootReducer data as we told it in persistConfig and we give it to createStore inside store variable.
persistGate is just like a provider that we need to wrap it around App component and its persistor is equal to persistor just like store prop and store variable for Provider and loading is equal to null or any loading component we want to show while data getting ready like loadinf={}.
note: be careful what data and how much data you want to store in local storage because local storage is limited and maybe there is a data that you’d better not to store it in local storage.
well well well, this article ends here and we can conclude that redux is not that badass ugly monster you thought :)
hopefully, you learned something from this article.
Goodbye and Good luck🤞
Top comments (0)