DEV Community

Cover image for Roll your Own Redux With useContext & useReducer
Glenn Stovall
Glenn Stovall

Posted on • Originally published at on

Roll your Own Redux With useContext & useReducer

“Most projects aren’t complex enough to require Redux.”

I hear this refrain from the React community often. I’m not here to debate how valid it is. What I do know is that there are situations where you do want to share state between multiple components, and you may not want to bring Redux into your architecture.

In this tutorial, you’ll learn how to create your own mini-state management system. I call them reducklings. 🦆

Our Use Case: Flash Messaging

By default Ruby on Rails includes flash messaging. Within your controller, you can easily dispatch a message to display on the screen. In our application, we want to something similar:

  • Display one or more messages at the top of the screen.
  • Be able to dismiss a single message.
  • Have the ability to clear all of the messages.
  • Any component should be able to dispatch a message.

1: Build Our Reducer

So for our messaging queue, it looks like we have a state that we want to perform several actions on. It’s a perfect use case for creating a reducer. Here’s what that looks like:

const messageReducer = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return [
    case 'CLEAR':
      return []
    case 'DISMISS':
      return state.filter((message, index) => index !== action.payload)
      return state

Enter fullscreen mode Exit fullscreen mode

2: Create a Context

In the next step, we’ll create a state array and dispatch function using useReducer. But first, we need a place to store them. This is where the magic happens. We are going to store both the state and dispatch in a context so we can access them from anywhere. Let’s being by creating our context:

const MessageContext = React.createContext({
  state: [],
  dispatch: null,
Enter fullscreen mode Exit fullscreen mode

3: Providing the Reducer

At the top level of our application, or the highest level where you want to have access to the duckling, you’ll want to pass the results of creating a reducer into the context.

import React, { useReducer } from 'react'
import { messageReducer, MessageContext } from './message_duckling
const App = () => {
  const [state, dispatch] = useReducer(messageReducer, [])
  return ( 
    <MessageContext.Provider value={{state, dispatch}}>
      {/* Your App Here */}
Enter fullscreen mode Exit fullscreen mode

4: Accessing The Messages With UseContext

Let’s look at our first use case, reading the messages within a component.

import React, { useContext } from 'react'
import { MessageContext } from './message_context'
const MessageContainer = () => {
  const { state, dispatch } = useContext(MessageContext)
  return (
    <div className="messages-container">
      {, index) => (
        <div className={`message ${message.type}`}>
export default MessageContainer
Enter fullscreen mode Exit fullscreen mode

5: Dispatch Actions

In a similar fashion to redux, we can use the dispatch function to update the messages. Here’s a form component that will create a message:

import React, { useState, useContext } from 'react'
import { MessageContext } from './message_context'
const MessageForm = () => {
  const [text, setText] = useState('')
  const { dispatch } = useContext(MessageContext)
  const createMessage = (e) => {
    const newMessage = { type: 'warning', text }
      type: 'ADD',
      payload: newMessage
  return (
    <form onSubmit={createMessage}>
      <input type={text} onChange={e => setText(} />
      <input type="submit" value="post message" />
export default MessageForm
Enter fullscreen mode Exit fullscreen mode

Bonus Points: HOCs and Custom Hooks

To make your code a bit more clear, you can wrap up your useReducer as its own custom hook. To make the code more extensible, you could also add an option to allow users to define their own initial state:

const useMessageReducer = (initial_state = []) {
  return useReducer(messageReducer, initialState)
Enter fullscreen mode Exit fullscreen mode

Something else that could be useful would be to create a higher-order component that passes along your duckling to any function. This way you can have functionality similar to Redux’s connect function:

const withMessageStore = (WrappedComponent) => (props) => {
  const { state, dispatch } = useContext(MessageContext)
  return (<WrappedComponent
Enter fullscreen mode Exit fullscreen mode

Review: Features of A Duckling

What does a duckling include?

  • A context that we can reference anywhere in our application.
  • That context comes with a global state and a dispatch function that lets us edit that state via a reducer. Optionally, it could include a custom hook and higher-order component to make it easier to implement. Now, let’s look at some of the features that are included in Redux that we don’t have here.

What A Duckling Isn’t

  • A duckling does not provide actions, types, or action creators.
  • A duckling does not bother with state and dispatch mapping. Every component gets the whole state and the whole dispatch. No mapStateToProps or mapDispatchToProps here.
  • As a consequence of that, we don’t have selectors either. Though you could possibly build them.
  • It has no concept of middleware.

If you are in a situation where believe that the problem you are trying to solve needs more of this functionality, then you know you have a stronger use case for using Redux! Don’t take this advice and re-invent the wheel when you don’t need to. Instead use it when you need smaller wheels for shorter, simpler trips.


Top comments (2)

inalbant profile image

"It has no concept of middleware."

So can we not fetch API requests using this method?

gsto profile image
Glenn Stovall • Edited

You could fetch API requests, but you couldn't do so using the dispatch method. no thunks or sagas here. Instead, you could make the API requests directly from your components or from helper functions, and then call dispatch when you handle the response.

Here's a new example of the createMessage function below that uses an API along with axios to post the new message to the server, and then update the state with the response:

  const createMessage = (e) => {
      .post('/messages', text) 
      .then(response => dispatch({
        type: 'ADD',