Reimplement Redux with vanilla React in 12 lines of code
Posted on January 11, 2021·
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.
This article is partly extracted from my course dedicated to React hooks: useEffect.dev. Its goal is to help you understand how hooks work, how to debug them, and how to solve common problems they can cause.
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={%raw%}{{ state, setState }}{%endraw%}>
{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 a 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 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={%raw%}{{ state, dispatch }}{%endraw%}>
{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 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={%raw%}{{ state, dispatch }}{%endraw%}>
{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 a 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 you it can be rewritten too, and in less that 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 course useEffect.dev. Its goal is to help you understand how they work, how to debug them, and how to solve common problems they can cause.
Check my latest articles
- 📄 13 tips for better Pull Requests and Code Review (October 17, 2023)Would you like to become better at crafting pull requests and reviewing code? Here are the 13 tips from my latest book that you can use in your daily developer activity.
- 📄 The simplest example to understand Server Actions in Next.js (August 3, 2023)Server Actions are a new feature in Next.js. The first time I heard about them, they didn’t seem very intuitive to me. Now that I’m a bit more used to them, let me contribute to making them easier to understand.
- 📄 Intro to React Server Components and Actions with Next.js (July 3, 2023)React is living something these days. Although it was created as a client UI library, it can now be used to generate almost everything from the server. And we get a lot from this change, especially when coupled with Next.js. Let’s use Server Components and Actions to build something fun: a guestbook.