Redux is an awesome library to handle the state of big applications, React or not. But when you think about it, the basic features of Redux can be implemented in very few lines of code. Let’s see how.
Disclaimer: this post should be used to understand better the notions of reducers and contexts, not to implement a global state management system. See this post by @markerikson.
Contexts
In React, contexts offer an elegant way to implement the “provider/consumer” pattern. As its name suggests, this pattern is composed of two main elements: a provider whose goal is to provide a certain value, and consumers, the components that will consume this value. Usually, you encapsulate your main component inside a Provider component, and then in the child components you can use hooks provided the context’s library:
// Main component:
return (
<Provider params={someParams}>
<App />
</Provider>
)
// In App or a child component:
const value = useValueFromProvider()
To create a context, we call the createContext function provided by React. The object it returns contains a Provider component. By encapsulating a component hierarchy inside this component, they’ll be able to access the context’s value.
const myContext = createContext()
const App = () => (
<myContext.Provider value="Hello">
<SomeComponent />
</myContext.Provider>
)
const SomeComponent = () => {
const value = useContext(myContext)
return <p>Value: {value}</p>
}
A very useful pattern is to create a custom provider to decorate the one provided by the context. For instance, here is how we can make our provider handle a local state (which will actually be used globally):
const GlobalStateProvider = ({ initialState, children }) => {
const [state, setState] = useState(initialState)
return (
<globalStateContext.Provider value={{ state, setState }}>
{children}
</globalStateContext.Provider>
)
}
The context now contains an object with a state and a setState attribute. To make it even easier to our context’s user, let’s create two custom hooks to access them:
const useGlobalState = () => useContext(globalStateContext).state
const useSetGlobalState = () => useContext(globalStateContext).setState
We now have a first viable implementation of global state management. Now let’s see how we can implement the core notion of Redux to handle the state updates: the reducer.
Reducers
Reducers offer an elegant way to perform updates on a state using actions instead of updating each state attribute.
Let’s say we want to update a state after an HTTP request succeeded. We want to update a loading flag by setting it to false and put the request result in the result attribute. With reducers, we can consider having this action:
{ type: 'request_succeeded', result: {...} }
This action will be passed as a parameter to the reducer function. It is a function that takes two parameters: the current state and an action. Traditionally, an action is an object with a type attribute, and possibly some other attributes specific to the action. Based on this action and the current state, the reducer function must return a new version of the state.
We can imagine this reducer to handle our first action:
const reducer = (state, action) => {
switch (action.type) {
case 'request_succeeded':
return { ...state, loading: false, result: action.result }
default:
// If we don’t know the action type, we return
// the current state unmodified.
return state
}
}
Good news: there is a hook in React to let us use a reducer to handle a local state and its updates using actions: useReducer. You can see it as an improved version of useState, but instead of returning a setter function to update the state, it returns a dispatch function to dispatch actions to the reducer.
const [state, dispatch] = useReducer(reducer, initialState)
In our case, the initialState parameter could contain this object:
const initialState = { loading: false, error: false, result: undefined }
To update the state via an action, just call dispatch with the action as parameter:
dispatch({ type: 'request_succeeded', result: {...} })
A global reducer in a context
Now that we know about contexts and reducers, we have all we need to create a context to handle our global state with a reducer. Let’s first create the context object:
const storeContext = createContext()
Then let’s create a StoreProvider component using the context’s Provider. As we saw previously, our context will contain a local state, but instead of using useState, we will use useReducer. The two parameters of useReducer (the reducer and the initial state) will be passed as props to our StoreProvider:
const StoreProvider = ({ reducer, initialState, children }) => {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<storeContext.Provider value={{ state, dispatch }}>
{children}
</storeContext.Provider>
)
}
To consume the store context, we will provide two hooks: one to read the state, and one to dispatch an action.
To read the state, instead of just creating a hook returning the whole state, let’s do the same as what React-Redux offers: a hook taking as parameter a selector, i.e. a function extracting from the state the value we are interested in.
A selector is usually very simple:
const selectPlanet = (state) => state.planet
The hook useSelector takes this selector as parameter and calls it to return the right piece of state:
const useSelector = (selector) => selector(useContext(storeContext).state)
Finally, the useDispatch hook simply returns the dispatch attribute from the context value:
const useDispatch = () => useContext(storeContext).dispatch
Our implementation is complete, and the code contains barely a dozen lines of code! Of course, it doesn’t implement all the functions that make Redux so powerful, such as middlewares to handle side effects (Redux-Thunk, Redux-Saga, etc.). But it makes you wonder if you really need Redux to just keep track of a (small) global state with the reducer logic.
Here is the full code for our Redux implementation:
const storeContext = createContext()
export const StoreProvider = ({ reducer, initialState, children }) => {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<storeContext.Provider value={{ state, dispatch }}>
{children}
</storeContext.Provider>
)
}
const useSelector = (selector) => selector(useContext(storeContext).state)
const useDispatch = () => useContext(storeContext).dispatch
Using our implementation
Using our implementation of Redux looks very similar to using actual Redux. Let’s see this in an example performing a call to an HTTP API.
First let’s create our store: the initial state, the reducer, the action creators and the selectors:
// Initial state
const initialState = {
loading: false,
error: false,
planet: null,
}
// Reducer
const reducer = (state, action) => {
switch (action.type) {
case 'load':
return { ...state, loading: true, error: false }
case 'success':
return { ...state, loading: false, planet: action.planet }
case 'error':
return { ...state, loading: false, error: true }
default:
return state
}
}
// Action creators
const fetchStart = () => ({ type: 'load' })
const fetchSuccess = (planet) => ({ type: 'success', planet })
const fetchError = () => ({ type: 'error' })
// Selectors
const selectLoading = (state) => state.loading
const selectError = (state) => state.error
const selectPlanet = (state) => state.planet
Then, let’s create a component reading from the state and dispatching actions to update it:
const Planet = () => {
const loading = useSelector(selectLoading)
const error = useSelector(selectError)
const planet = useSelector(selectPlanet)
const dispatch = useDispatch()
useEffect(() => {
dispatch(fetchStart())
fetch('https://swapi.dev/api/planets/1/')
.then((res) => res.json())
.then((planet) => {
dispatch(fetchSuccess(planet))
})
.catch((error) => {
console.error(error)
dispatch(fetchError())
})
}, [])
if (loading) {
return <p>Loading…</p>
} else if (error) {
return <p>An error occurred.</p>
} else if (planet) {
return <p>Planet: {planet.name}</p>
} else {
return null
}
}
And finally, let’s encapsulate our application (the Planet component) inside the provider of our store:
const App = () => {
return (
<StoreProvider reducer={reducer} initialState={initialState}>
<Planet />
</StoreProvider>
)
}
That’s it! Does Redux seem less mysterious now that you know how to write your own implementation?
I also created a CodeSandbox if you want to play with this implementation.
Bonus: rewriting useReducer
We used useReducer because this hook is provided by React. But if it wasn’t, did you know it can be rewritten too, and in less than five lines of code?
const useReducer = (reducer, initialState) => {
const [state, setState] = useState(initialState)
const dispatch = (action) => setState(reducer(state, action))
return [state, dispatch]
}
If you liked this post, I talk a lot more about React and hooks in my new eBook A React Developer’s Guide to Hooks. Its goal is to help you understand how they work, how to debug them, and how to solve common problems they can cause.
You can also follow me on Twitter (@scastiel), where I regularly post about React, hooks, frontend in general, and other subjects 😉
Top comments (6)
I'll point out my usual caveat whenever the "replace Redux with
useReducer" discussion comes up:Context has limitations with how it handles updates, specifically around components not being able to skip re-renders. Also, React-Redux has very different update characteristics because it uses store subscriptions.
See my posts React, Redux, and Context Behavior and A (Mostly) Complete Guide to React Rendering Behavior for complete details on the differences.
Actually, Context API and Hooks drawback is that re-rendering happens although there are many solutions including the one inspired by Dan Abramov and here you go :
1- github.com/facebook/react/issues/1...
2- blog.axlight.com/posts/benchmark-r...
3.... COME AND THANK ME :P
twitter : @MokhtarMegherbi
Thanks for the additional information 🙂
You are absolutely right, and I’m not suggesting to never use Redux again, I’m a big fan of Redux, especially coupled with Redux-Saga or Redux-Observable 😉
But I enjoy a lot reimplementing some libraries I use, especially when beginners find them complex at first sight. This is mostly for an educational purpose. For the same reason, I wrote another post a while ago about implementing Redux (again) and Redux-Saga: Lost with Redux and sagas? Implement them yourself!
Your implementation lacks middleware 😉
Yes it does, although it wouldn’t be that hard to add 😉
Thanks, this is a actually a pretty good base to reimplement a mini-redux in other frameworks !