How to use React Context API with useReducer to follow a similar style to Redux

user_16693156 0
Viewed 192

I know how to use the context API but I'm trying to use it in another way that resembles alot with how Redux works so I can get better with Redux when I try to learn it. My goal for this simple case is to type things in the input field and have it render onto the screen, if you click on the button, an alert window will show what you typed. If you click on clear text, the input field will be blank. I want to be able to do this without having to resort to local state management like useState, but rather, dispatch the methods that I created in my reducers file and pull in the state value. I can't do that second part, it seems like I'm dispatching properly but when I try to render 'text' it's only rendering the initial state and I can't figure out how to update it, or even clear the text. Heres the link to my sandbox: https://codesandbox.io/s/create-context-api-redux-style-odv01?file=/src/Button.js

react-context redux reactjs javascript
1 Answers

I won't rewrite all your code but I can point out where your issue is so you can continue working on it. Your issue is with the context provider you've created, which will never update state. The context provider is responsible for distributing state directly to child components throughout the tree, but it still needs to keep that state, in your case you didn't define any state for it.

import React, { createContext, useContext, useReducer } from "react";

export const StateContext = createContext({
  // put your initial state here
});

// then this will now have initial state and updated state
export const useStateValue = () => useContext(StateContext);

export const StateProvider = ({ reducer, initialState, children }) => (
  // now you can declare state like this
  const [example1, setExample1] = useState(example1)
  const [example2, setExample2] = useState(example2)
  // this is where you'll define your dispatch function

  // and use it like this
  const value = {
    example,
    setExample,
    example2,
    setExample2
    // or you can add a custom dispatch here
  }

  <StateContext.Provider value={value}>
    {children}
  </StateContext.Provider>

  // or you can do
  const [example, setExample] = useState(useStateValue())

  <StateContext.Provider value={{example, setExample}>
    {children}
  </StateContext.Provider>
);

This code isn't perfect, it's just to give you an idea of what you should be doing. When you now import the useStateValue somewhere you can choose how you destruct it and which state/functions you want to import, i.e. dispatch.

Admin1
Related