欢迎光临
我的个人博客网站

使用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, 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对象)即可

赞(0) 打赏
未经允许不得转载:张拓的天空 » 使用react Context+useReducer替代redux
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏