使用react Context+useReducer替代redux

首先明确一点，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, ADD, 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对象)即可

巴特西

使用react Context+useReducer替代redux

redux使用教程

回归正题

最终效果

`tips`

最新文章

热门文章