On a fine Saturday morning you wake up with a brilliant idea for your next side project. You have been thinking about it all week and now you're ready to dive in. Anyway you wanted to experiment with all that hot new tech and frameworks you have been missing out in your boring day job.
You have the idea roughly sketched out for a frontend application using all the latest and greatest features of React(Context, hooks etc etc) along with a serverless backend(Maybe using Cloudflare Workers?) You open your favorite editor with a shiny new Create React App running ready to be The Next Big Thing. And bam! few hours in to development you realize you actually haven't done anything but ended up with dozens of tutorial tabs and docs open only to be confused and frustrated with all these new features and jargon.
That's exactly where I was when I decided to write this guide to help myself organize my learning and hopefully share that knowledge with a frustrated dev like me. In this guide I'm going to start with basics of both Context and Hooks and gradually integrate them with each other to create a simple but functional state manager like Redux.
State Management in React
So let's go back a little and define my requirements. I want to setup a React application,
- Use Context and Hooks for global state management
- Implement authentication using global state
- Configure routing with public and private routes
If you have these three in place rest of the app is pretty much usual react business.
Working with global state using Redux is fairly straightforward. You implement a store with some initial value, write reducers that will help you update the store, write actions and action creators used to dispatch updates to store. Then you simply connect any component in your application to the store to be able to use the global state or make updates.
We are going to see how we can achieve something similar using Context and Hooks. Our plan would be,
- Implement simple state management using Hooks
- Convert this state to be a global state using React Context
- Abstract away the Hooks+Context logic into a nice reusable API similar to Redux with a store, reducers and actions
- Use the created store to implement simple authentication along with Routing
Let’s start with Create React App and experiment a little.
npx create-react-app react-context-example
cd react-context-example
yarn start
We will start with a very simple Todo application which has three components as follows.
Let’s add the following components.
components/Items.js
App.css to make it look nice :)
App.js
Next we want to introduce a state to store the list of todos and be able to add and remove todo items.
State Using Hooks
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
Previously we would have converted App component into a class component and introduced state to the class. But with react hooks we can keep it as a functional component and introduce state using the useState hook. A very nice introduction to hooks can be found in hooks documentation.
Let’s update App.js as follows.
Here we have declared an array of items as a state variable using the useState hook. It takes the initial state as a parameter and returns two values, first which is the state itself and second, a function to update the state. Note that unlike setState in class components that you may be used to, hooks state update method does not merge existing data. Therefore we have to take care of merging before passing the updated state. For this we define two functions handleAddItem, handleRemoveItem to add and remove items. Also note that these functions are passed down into our child components NewItem and ItemList as props. Now we have a basic but functional todo list. You can go ahead and introduce another state hook into NewItem component to capture the text input by user.
As you can see using hooks make our code a little bit cleaner and makes us avoid class components and life cycle hooks we may need to be concerned about. Moving forward with our goal of creating a redux like store, this let’s us abstract away state management logic and make it reusable. Specially useReducer hook which we will take a look at in a moment allows us to wrap this in a nice API.
Using React Context
Now let’s explore what react context is. React describes context as,
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
This is exactly what we need for global state management. You start with a top level component that uses context to store global state. Then anywhere within your component tree you can access and/or make updates to this state. This is pretty much the basic idea behind global state managers like redux.
Remember we had to pass down the handleAddItem and handleRemoveItem methods as props to child components? Let’s refactor this to be obtained from the context without having to drill down the props.
Using react context is pretty easy. It takes the following form. First you create a context with a call to React.createContext() This takes an optional initial value as an argument. Then you need to provide the context somewhere in your component tree using Context.Provider so that components below that will have access to it. Then wherever you want to use the context, use Context.Consumer which will have access to the value.
const MyContext = React.createContext(/* initialValue /*)
<MyContext.Provider value={/* value*/}>
<MyContext.Consumer>
{ value => /* components can access the value object */ }
</MyContext.Consumer>
</MyContext.Provider>
A good explanation of React Context is available in the documentation
Lets start with creating a new context for our todos in contexts/TodoContext.js
Update the App component as follows to provide the TodoContext to our component tree.
App.js
Next we can use the TodoContext.Consumer within our child components and have access to the state value passed to TodoContext.Provider
Items.js
You may notice that we are repeating the TodoContext.Consumer wrapper everywhere we need to consume the context value. We can refactor this using the useContext() hook and make it less verbose.
Updated Items.js to use useContext
At the moment we are storing our global state in the App component. This is not a very desirable behavior specially as our todo state grows in complexity and it’s not exactly the responsibility of App component to hold the global state. So let’s move it to our already created TodoContext
contexts/TodoContext.js
We are exporting two functions here. One is a the TodoProvider component which is actually a higher order component wrapping the TodoContext.Provider along with a state. This becomes our global store and we need to update App component as follows.
Our App.js is a lot more simplified and does not have todo logic in it.
The second export is simply a custom hook wrapping the useContext hook which already has TodoContext passed into it. In Items.js you need to import useTodoContext and replace,
const todoContext = useContext(TodoContext);
with
const todoContext = useTodoContext();
That’s it! Now we pretty much have a neat global store built with React Context and Hooks. Following the same pattern you can create new ContextProviders, wrap your application with it and then use a custom useContext hooks anywhere in your component hierarchy to use it as a store. Feel free to take a break at this point ☕
Adding Reducers and Actions
The following sections are heavily inspired by Redux. If you are not familiar with redux please checkout the documentation first.
Our state update logic is defined as functions in TodoProvider and each of these functions are stored as references in the state itself which can be accessed by consuming components to update the state. Following the redux pattern, we can introduce Actions and Reducers to our state manager. We can have actions that describe what happens to our state and a reducer which will handle state changes corresponding to the said actions.
Let’s start with creating the actions ADD_TODO, REMOVE_TODO and CLEAR_ALL. For now I’m going to add all the actions and the reducer inside the TodoContext.js file itself. If this gets too large feel free to split your code into separate files.
Updated TodoContext.js with actions and reducer
First I have created a few actions and corresponding action creators, pretty similar to redux. Then we have the reducer which is again a simple pure function which takes state and action as arguments and return the updated state.
Then inside our TodoProvider we are changing the useState hook to useReducer hook. It accepts a reducer and an initial state(unlike in redux where we pass the initial state to the reducer, it’s recommended to pass initial state into useReducer hook). The two values returned by useReducer is the state itself and a dispatch function which we can use to dispatch our actions. Since our consumer components would want to use the dispatch function we pass it as a value in TodoProvider. Now we are all set to use the state and dispatch actions from our consumer components.
Updated Items.js to use actions and dipatcher
Notice how I have destructured the dispatch method from useTodoContext() and used it to dispatch an action of adding a todo. Similarly we use state value and dipatch along with relevant actions to list todos and remove todos.
Implement Authentication Using Context+Hooks Store
Now that we have a usable global store implementation, let’s go back to our main requirement and implement authentication. We need to have a separate context to store the authentication details. So our global state would look something like this.
{
auth: {
isLoggedIn: true,
name: "John",
error: null,
},
todos: []
}
We need to have routing configured with base route / displaying a login page and a protected route /todos which will display a Todos page if user is logged in. We can update our component hierarchy as follows. Todos component will handle all todos and live in /todo route which will be a private route. If user is not logged in he will be redirected to / route which will render the Login component.
First add react-router and set up the components.
yarn add react-router-dom
components/Todos.js
components/Login.js
App.js
api/auth.js
We can follow the same pattern we used for TodoContext to create AuthContext for authentication which is pretty straightforward and self explanatory.
contexts/AuthContext.js
Before we use the AuthContext we need to make sure we are providing it at the top of our application. So let’s wrap the entire app with AuthProvider. Meanwhile I’m going to enhance our Greeting component as well to use the auth state and display a greeting and a logout button.
App.js
Add Login Functionality
Now that we have auth store configured we can start building the functionality of Login page. Inside the login page we need to use the store to check whether the user is already logged in and if so, redirect him to the Todos page. If not, we display the login form and on submit we call our mocked login API. If the login is success we can dispatch the loginSuccess action or else dispatch loginFail action.
Protect the Routes
Next let us make the /todos route private so that only a logged in user can access it. Anyone else will need to be redirected back to the login page. We can do this by simply wrapping the react-router Route component with a higher order component and using the AuthContext inside it to decide whether to render the route or redirect to login page.
components/PrivateRoute.js
Now we can simply use PrivateRoute instead of Route to make any route inaccessible to logged out users.
And we are done! 🙌
We learnt how to build a redux like store gradually, using context and hooks and you can use this as a simple and lightweight alternative to redux in your next project. As next steps you can try experimenting with store middleware, checkout how to combine contexts(something like redux combineReducers()) as well as checkout the other hooks provided by react.
Checkout the full source code here
Feel free to leave a comment or checkout this post in my personal blog
Top comments (2)
Thank you so much for this, your breakdown is very easy to follow!
Thanks for reading!