Replace Redux with react context + usereducer


To be clear, Redux is a useful architecture, but it’s not a must. In fact, in most cases, you can use it, just react.

Someone once said that.

“If you don’t know if you need Redux, you don’t need it. “

Dan Abramov, the creator of Redux, added.

“You need Redux only when you encounter problems that react can’t solve. “

Redux tutorial

Return to business

How to use context + usereducer to do global state management like vuex

  1. First, create the project using create react app
npx create-react-app my-app
cd my-app
npm start

2. Create a state folder in the SRC directory. There is only one index.js file

 |  ---- state
           | ------index.js

3. state> index.js The code is as follows

Import react, {usereducer} from "react" // import react,

const State =  React.createContext () // create a context object to pass data to the component tree
//Define the change rules of reducer
const ADD = "ADD"
function reducer(state, action) {
    switch (action) {
        case ADD:
            return state + 1
        case DECREASE:
            return state - 1
            return state
//Define a component to wrap components that need to get shared data
const StateProvider = props => {
    //Methods to get and set values. 0 is the default value
    const [state, dispatch] = useReducer(reducer, 0)
    /*Value is the data that the component tree can get. It passes a state value and a dispatch method
       Dispatch is used to change the state*/

export {
    State, StateProvider, ADD, DECREASE

4. Only the state folder is left in the SRC directory, index.js Documents, App.js File, new components folder


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { StateProvider } from "./state"



import React, { useContext } from "react"
import MyComponents01 from "./components/MyComponents01"
Import {state, add, reduce} from "." / state "// get the context object

export default function App() {
    Const {dispatch} = usecontext (state) // get the dispatch
    return <>


import React, { useContext } from "react"
Import {state} from ". / state" // get the context object

export default function MyComponents01(){
    //Take out the shared data state
    const { state }=useContext(State)

        Shared data: {state}

Final effect



Under the provide component, all components can get the shared data,
It is also very simple to get the shared data. The context object is introduced
Use const {…} = usecontext (created context object) inside the component

Recommended Today

How to build a free log service with seq

Introduction to seq Seq is a very friendly log service developed by foreigners for. Net platform. It supports container deployment and provides a single user free development version. Official website: Use documentation: The main functions of SEQ are as follows: Support mainstream programming languages, especially. Net friendly Rich event formats Record the above information and […]