useReducer、useContext在简单项目中的全局复合状态管理

FrozenNoodle

已于 2022-10-19 18:17:05 修改

阅读量201

点赞数

文章标签： javascript react.js 前端

于 2022-10-19 16:25:05 首次发布

本文链接：https://blog.youkuaiyun.com/FrozenNoodle/article/details/127410474

版权

这篇博客介绍了如何在React应用中利用useReducer钩子和自定义Context来实现状态管理。首先定义了初始状态和reducer函数，然后创建了一个Context Provider组件，通过useReducer管理状态并传递dispatch方法。在子组件中，使用useSelfState钩子获取到Context中的状态和派发函数，从而能在组件内修改状态。示例中展示了在Counter组件中更新count2状态的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

reducer封装：

import React, { useReducer, useContext } from 'react';

const initState = {
  count: 0,
  count1: 0,
  count2: [],
}
const myContext = React.createContext();

const initialState = () => {
  return { ...initState }
};
const reducer = (state, action) => {
  return { ...state, ...action }
};

const ContextProvider = props => {
  const [ state, dispatch ] = useReducer(reducer, {}, initialState);
  return (
    <myContext.Provider value={{ state, dispatch }}>
      {props.children}
    </myContext.Provider>
  );
};

const useSelfState = () => {
  const contextValue = useContext(myContext);
  return contextValue;
};


export { ContextProvider, useSelfState };

index.js

import React from 'react';
import { ContextProvider } from './reducer';
import Counter from './Counter';

const App = () => {
  return (
    <div className="App">
      <ContextProvider>
        <Counter />
      </ContextProvider>
    </div>
  );
};
export default App

child.js

import React from 'react';
import { useSelfState } from './reducer';

function Counter() {
  const { state, dispatch } = useSelfState();
  console.log('count2', count2)
  return (
    <div>
      Counter Count: {state.count}
      <button onClick={() => dispatch({ count2: [ 1, 2, 3 ] })}>Reset</button>
    </div>
  );
}

export default Counter;