Sharing state between components using hooks.
Hello my JS developer friend, how are you today? Hope you are ok!
In this article I will teach you how to share state between components without using redux.
If you don’t want to follow all the steps, you can find all of the code of this article in the following link https://github.com/guizox/sharing-state
Just created a project called sharing-state using CRA.
npx create-react-app sharing-state
First of all, let’s configure the webpack to accept optional chaining and aliases as my last article.
First of all, follow this link
Install the two dependencies that we need.
npm install customize-cra
npm install — save-dev @babel/plugin-proposal-optional-chaining
And let’s also install material-ui to have a better visual of our application. Follow the steps in the link above.
Configure your config.overrides.js as the you want, my configuration is the following
And let’s test it.
I always like to call my views as containers, so I created a folder called components and containers.
Inside of containers folder, create a folder home and inside of it create a file called index.js
This is the only view of this application, so I won’t create routes, but if you need routes, you can import all of containers for your routes.
Let’s start the application with
npm start
and take a look at our App.js file.
Our app.js is the following.
And the what is rendered is the following.
Let’s import the container and remove everything from the default CRA.
Now we just have.
Notice that I am importing direct from containers/home once I have my aliases configured.
Awesome, but until now I just gave you a little way to start your application architecture but that’s not the point of this article.
I will give you a problem now and a way to solve.
Let’s say to a company want’s to hire you and gives you a challenge. The challenge is
Create a react application that the user will be able to see a catalog of movies and filter them by stars rating. Show us a good way to solve this problem without using REDUX with a easy way to share state between components without controlling the state in a parent component.
Hm, ok, let’s think about it…
I need to have a filter by stars component and a movie catalog component and a way to share state between then without using the parent component to do this… How can I do this?
If you google it, you probably will read about 3 things.
Redux, of course.
Context API.
Hooks.
Context API is a way to solve this problem, it came to solve this problem after redux but the community didn’t receive it so well and right after the hooks api were created.
So let’s use the hooks to solve this.
First of all, let’s create 3 files.
starFilter.js
catalogMovie.js
Module/homeState.js
Let’s start with homeState.js
I created all the logic inside of it and seated an initial state with movies and stars as 5 and export the state and the onChangeStars inside of an object.
Let’s import this file inside of homeContainer and console the value.
Awesome, I have my state created and also a way to edit it.
Let’s create the other 2 components now.
First, the starsFilter.js
What I am doing here is use build a line with 5 stars and painting the stars according with the state.stars value.
But to this work, I need to import it inside of homeContainer and pass the state as props to starsFilter component.
The result is the following
Awesome, right?
Ok, let’s build the movies catalog now with the same approach.
I put some grids to make it responsible to have a better visual.
Now, let’s import inside of homeContainer, pass the state as props and take a look at the result.
And the result is. the following
Default
4 stars
3 stars
1 star
This way you are able to share state between components without controlling everything in the parent component and you also remove all the logic for an external layer and the components stays just as views.
Hope you guys enjoy this article.
