How to integrate React Hooks into your project without changing your Redux codeMohammad IqbalBlockedUnblockFollowFollowingMar 22Photo by Tyler Franta on UnsplashIn this tutorial we will be going over how to integrate React Hooks into a React Redux project without changing the Redux code (reducers and actions) at all.
To save time, we can start with with a basic React Redux app instead of building one from scratch.
This will allow you to see the before and after code side by side and make integration for your app much easier.
Starter code:iqbal125/modern-react-app-sampleContribute to iqbal125/modern-react-app-sample development by creating an account on GitHub.
github.
comUsing the correct Version of ReactThe very first thing we have to do is make sure we have the correct version of React.
At the time of this writing, create-react-app does not give you the correct version.
So what you can do is use create-react-app then go into your package.
json and type in the correct version.
So just change React and React-dom to version 16.
8.
Save the file and delete your node modules folder.
Run npm install and you are good to go.
Refactoring a React class to a React HookSo the first thing we will do is refactor a React class component to a React Hook.
Let’s open our App.
js file and turn it into a Hook, so refactor your App.
js to the following:So basically just turn the class into an arrow function and delete the render method.
And that’s it, you have now created a React Hook!Setting up another HookIn the same way, we can setup up another Hook, which we will setup in a folder called Hooks.
So create a hooks_container.
js file in the hooks directory and set it up like so:The useState() HookWe will now begin to set up some basic non-global component state with the useState() hook.
The useState() hook is similar to the React setState() function.
It is setup with array destructuring, where the first element in the array is the state value and the second element is a function to change the state.
Let’s just create basic increment and decrement buttons to see how the use state function.
Set up the buttons like so:Notice we don’t have to use the “props” or “state” keyword anywhere we can just use the variable and function name directly.
This is one of the things that makes React Hooks so easy to work with.
Your app should look something like this.
And you should be able to freely increase or decrease the number.
Now that we have a basic idea of how useState() works we can move onto something a little more complex.
useReducer() hookWe can now begin setting up the useReducer() hook.
Before we can use the useReducer() hook we must first setup the reducer.
The actions can actually be left as is.
And the change we have to make to the reducer is very minimal.
All we have to do is change the export statements instead of exporting default.
We have to export both the reducer and the initial state.
To save time, just create a new reducer called hooks_reducer.
js in the reducer file and copy the code from Reducer1.
You should have something that looks like this:Now simply import this reducer and its initial state to the hooks_container.
js.
And pass them both in to the useReducer() hook.
Let’s also create 2 buttons to change stateprop1 from false to true and then false again.
And we can also create a ternary expression to display text depending on whether stateprop1 is true or false.
Remember that stateprop1 is the same one we set up in the HookReducer1, but we are updating here in our container.
And we are using the same pre-existing actions to update the reducer.
Notice in the comments I left two alternate methods of dispatching actions.
They are all doing the same thing.
Returning a javascript object with a type of a string of SUCCESS.
So your code should look like this:Your app should look like this and you should be able to change stateprop1 from the hooks container:You will notice one problem when we go to another component: the state is not saved.
This is because even though we are using actions and reducers, the state is still local component state and not available globally.
To make the state available globally we actually have to use the React Context, which we will setup next few sections.
Setting up Actions and the ReducerBefore we setup Context, let’s setup the Actions and Reducer we will use with it.
So let’s add a second property to the HooksReducer1 called stateprop2 and set it to 0.
We will now need to set up actions and action types to work with this new piece of state.
First let’s create 2 action types for stateprop2:Then we can go in our actions file and create 2 action creators to handle these actions types.
Finally we need to setup our reducer which should look like this:React ContextNext, we have to set up the context object.
Simply create another context.
js file and setup it up like so:Note that prop1 here is irrelevant.
We will be overriding this in our App.
js file.
We simply supplied prop1 to initialize the Context object.
All the code for updating and reading our state will be done in the App.
js file.
Next let’s import this context object to our App.
js file.
Also import HooksReducer1 and the Actions since we will use them here.
Let’s also setup the useReducer the same way as before.
Next we need to create 2 functions to dispatch our action creators we just created.
These functions will increment and decrement stateprop2.
Also we need to wrap our routes with a <Context.
Provider /> component.
This is what allows us to have a global state.
The <Context.
Provider /> component passes down all the state to the child components.
Since App.
js is the root component the state is passed down to every component in the app, which is what makes the state global.
The state itself is contained in a prop called “value”.
All this is similar to the <Provider /> component and “store” prop seen in React-Redux.
We then need to pass in the state and action dispatches as properties to the value prop.
We will need 3 properties here: one for a function to increment our state value, one for a function to decrement our state value and one to hold the actual state value.
All together your App.
js file will look like this:I have intentionally kept all the function and property names different so it will be easier to see where everything is coming from when we use Context in the child component.
So now, all these properties defined in the value prop can be accessed by all the child components, and we therefore have a global state!Using Context in a child component with the useContext() hook.
Let’s go back to our hooks container and use these functions and state we just setup.
To use the Context in our hooks container, we first need to import it and pass the entire Context object into the useContext hooks.
Like so:Next we can directly access the properties we set in the value prop directly through the context variable.
Remember addGlobalValue() is the name of the property we supplied to the value prop in App.
js.
It is not the name of the function for dispatching actions or the name of the function we set in the useReducer() hook in App.
js.
Accessing the state value through Context is done in the following way:And similar to dispatching actions, the valueGlobalState is the property name supplied to the value prop.
And we have to access stateprop2 with dot notation from the valueGlobalState property, since valueGlobalState contains the entire intialState from HooksReducer1, including stateprop1.
And if you test now you will see that the state updates and persists even after you go to another component, allowing you replicate Redux functionality and have a global state.
You can use this pattern to essentially scale this up for all your Redux code.
final code:iqbal125/react-hooks-basicContribute to iqbal125/react-hooks-basic development by creating an account on GitHub.
github.
comSummarySo here is a conceptual summary of how to do it (requires basic React hooks knowledge ):Actions do not need to be changed at all.
Reducers do not need to be changed either.
Simply export both the initial state and the reducer instead of just the reducer.
Do not use “export default” at the bottom of the reducer file.
Import the reducer and its initial state to the root App.
js file.
Call the useReducer() hook in the root App.
js file and save it in a variable.
Similar to the useState hook, the first element in the array destructuring is the state value and the second element is the function to change the state.
Then Pass in both the reducer and initialState you imported to the useReducer() hook.
Import as many reducers as you want and pass each of them into a separate useReducer() Hook.
Import actions to App.
js as normal.
Dispatching actions is also exactly the same.
Instead of using the mapDispatchToProps() function you will dispatch the actions from the change state function (second element in array destructuring) from the useReducer() hook call.
Setup and initialize the React.
CreateContext() function in a another file and import it to App.
js.
Then Wrap your <Routes /> with <Context.
Provider>.
You will generally need 3 properties for each piece of state for the value prop in the provider.
1 property to set the state to a new value, 1 to pass in the actual state, and 1 to set the state back to default.
Then to use the state in the components, you first import the Context Object from context.
js and then just pass it in to the useContext() hook and save this in a variable called “context” or whatever you like.
Then to access the state property, just do the variable name “context” “.
” then the name of property set in the value prop, followed by the name of the property set in the initialState of the reducer.
To dispatch actions just do “context” “.
” then call the property name.
Once this is done your context state is available globally and will work with your existing React Redux code.
For a 100% Free Video version of this tutorial and more in-dept React Hooks content please see my Udemy course or Youtube playlist:https://www.
udemy.
com/react-hooks-with-react-redux-migrationhttps://www.
youtube.
com/watch?v=l8ODM-KoDpA&list=PLMc67XEAt-ywplHhDpoj5vakceZNr8S0B.