使用react Context+useReducer替代redux

发布时间：2020-12-15 09:30:00 所属栏目：百科来源：网络整理

导读：首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。曾经有人说过这样一句话。 "如果你不知道是否需要 Redux，那就是不需要它。" Redux 的创造者 Dan Abramov 又补充了一句。 "只有遇到 React

首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。

曾经有人说过这样一句话。

"如果你不知道是否需要 Redux，那就是不需要它。"

Redux 的创造者 Dan Abramov 又补充了一句。

"只有遇到 React 实在解决不了的问题，你才需要 Redux 。"

redux使用教程

回归正题

如何使用context+useReducer来做类似于Vuex一样的全局状态管理.

首先使用create-react-app创建项目

npx create-react-app my-app
cd my-app
npm start

　　2. 在src目录下创建state文件夹,里面只有一个index.js文件

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

　　3.?state>index.js代码如下

import React,{ useReducer } from "react" //导入react,const State = React.createContext() //创建Context对象,来向组件树传递数据
//定义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
    }
}
//定义一个组件来包裹需要获取到共享数据的组件
const StateProvider = props => {
    //获取值和设置值的方法,0是默认值
    const [state,dispatch] = useReducer(reducer,0)
    /* value 就是组件树能够拿到的数据,传了一个state值,和一个dispatch方法
       dispatch就是为了改变state用的 */
    return <State.Provider value={{ state,dispatch }}>
        {props.children}
    </State.Provider>
}

export {
    State,StateProvider,ADD,DECREASE
}

　　4.?src目录下只留下state文件夹,index.js文件,App.js文件,新建components文件夹

src/index.js

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

ReactDOM.render(
     <StateProvider>
        <App />
      </StateProvider>,document.getElementById('root')
);

src/App.js

import React,{ useContext } from "react"
import MyComponents01 from "./components/MyComponents01"
import { State,DECREASE } from "./state" //取出context对象

export default function App() {
    const { dispatch }=useContext(State) //获取到dispatch
    return <>
        <h1>计数器:</h1>
        <div>
            <button onClick={()=> dispatch(ADD)}>+1</button>
            <button onClick={()=> dispatch(DECREASE)}>-1</button>
        </div>
        <MyComponents01 />
    </>
     
}

src/components/MyComponents01.js

import React,{ useContext } from "react"
import { State } from "../state" //取出context对象

export default function MyComponents01(){
    //取出共享的数据state
    const { state }=useContext(State)

    return <div>
        共享数据:{state}
    </div>
}

最终效果

tips

只要在Provide组件下,所有的组件都可以获取到共享数据,
获取共享数据也很简单.引入Context对象
在组件内部使用const { ... } =useContext(创建的Context对象)即可

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!