React Hooks: Redux Basics Edition
Learn the basics of Redux used alongside React Hooks
React Hooks were introduced to React with the v16.8 release in Feb 2019. Before the release, there were features that were exclusive to class components. With Hooks, functional components now allow the use of state and other React features within them. Hooks were also introduced to be able to reuse stateful logic between components, to simplify complex components that were hard to understand, and to expand features within functional components since classes were confusing to people and machines. In June 2019, React Redux v7.1 was released in order to incorporate Hooks.
Set Up Redux
The setup of Redux will be exactly the same whether or not you’re using Hooks. For the example in this article, we’ll be making a simple counter application (which wouldn’t make much sense for Redux, but we’re using it just for example purposes). First off, you’ll need a couple of packages:
npm install redux
npm install react-reduxThe first couple of steps will be to set up the store, reducer, and actions, as seen below:
Redux Without Hooks
To use Redux without Hooks, the connect() function imported from react-redux would connect the React component with the Redux store, which gives access to state as well as the dispatch functions to change state. To obtain access to those, the parameters of mapStateToProps and mapDispatchToProps are passed through the function, which provides state and the imported dispatch functions as props within the component. Order matters as mapStateToProps will always need to be first and mapDispatchToProps will need to be the second parameter. Both of these will be set up as variables as seen below:
If we want to use Hooks to have the same functionality as the application above, we will no longer need to use the connect() function nor set up variables for mapStateToProps and mapDispatchToProps. Instead, we can use the Hooks available with react-redux, useSelector() and useDispatch().
useSelector()
useSelector() is the equivalent of mapStateToProps as it provides access to the store. This function should typically be a pure function as it is potentially called at multiple times. The entire store would be the argument, so what is pulled from it can be manipulated, as the store is an entire object. When the function is assigned to a variable within a functional component, the state would be accessed through the variable instead of through props. With the counter application, state only consists of the counter that changes and can be set up as below:
useDispatch()
To obtain access to the dispatch functions, we will be able to use the useDispatch() function. This Hook uses a reference to the dispatch function in order to use the dispatch functions as needed. This is also set up by setting the function to a variable, giving it access to be used as a callback, which is needed for our counter application. The dispatch function would then be passed through as an argument, as shown below:
Conclusion
I do find React Hooks to be a lot cleaner code to use, so I would prefer to use React Redux Hooks for any future code. With this counter application, this wouldn’t make the most sense but would be a lot more useful within a larger application. For more information on these Hooks, as I’ve only gone over the simple areas to make a simple functioning application, see the resources below. Keep on Hooking on!
Resources:
- “React”, Facebook Open Source, accessed November 7, 2020, https://reactjs.org/
2. “Redux,” Dan Abramov, accessed November 7, 2020, https://redux.js.org/
3. “React-Redux,” Dan Abramov, accessed November 7, 2020, https://react-redux.js.org/
