使用useModel()来简化Redux、提高开发效率，React项目不再害怕状态管理

2023-12-02 04:37:50

介绍

Redux是React生态系统中非常流行的状态管理库，它可以帮助我们轻松地管理全局状态。然而，Redux的学习曲线相对较陡，而且它可能会增加项目中的代码量。useModel()是一个React钩子，它可以帮助我们轻松地创建全局状态和dispatch函数，从而简化了状态管理。

2. useModel()的原理

useModel()的基本原理就是使用useContext创建全局状态，useReducer创建dispatch去更新state，主要对dispatch做了封装组件中哪里需要就引入useModel。

3. 如何使用useModel()

3.1 创建全局状态

import { createContext, useContext } from "react";

// 创建一个全局状态上下文
const Context = createContext();

// 将全局状态暴露给组件
const Provider = ({ children, initialState }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return <Context.Provider value={{ state, dispatch }}>{children}</Context.Provider>;
};

3.2 更新全局状态

import { useContext } from "react";

// 获取全局状态上下文
const Context = useContext(Context);

// 使用dispatch更新全局状态
const dispatch = Context.dispatch;

3.3 在React组件中使用useModel()

import { useModel } from "use-model";

// 创建一个新的全局状态
const model = useModel({
  initialState: {
    count: 0
  }
});

// 使用全局状态
const Count = () => {
  const { state, dispatch } = useModel("count");

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>Increment</button>
    </div>
  );
};