使用react Context+useReducer替代redux

发布时间:2020-10-29 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了使用react Context+useReducer替代redux编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

redux使用教程

回归正题

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

  1. 首先使用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对象)即可

总结

以上是编程之家为你收集整理的使用react Context+useReducer替代redux全部内容,希望文章能够帮你解决使用react Context+useReducer替代redux所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478