Replace Redux with react context + usereducer

Time:2020-11-23

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

src
 |  ---- 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"
const DECREASE = "DECREASE"
function reducer(state, action) {
    switch (action) {
        case ADD:
            return state + 1
        case DECREASE:
            return state - 1
        default:
            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*/
    return 
        {props.children}
    
}

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

src/index.js

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

ReactDOM.render(
     
        
      ,
  document.getElementById('root')
);

src/App.js

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 <>
        Counter:
        
             dispatch(ADD)}>+1
             dispatch(DECREASE)}>-1
        
        
    >
     
}

src/components/MyComponents01.js

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)

    return 
        Shared data: {state}
    
}

Final effect

 

tips

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:https://datalust.co/seq Use documentation:https://docs.datalust.co/docs The main functions of SEQ are as follows: Support mainstream programming languages, especially. Net friendly Rich event formats Record the above information and […]