手写React-Redux，拥抱hooks，赋能状态管理

2024-01-10 18:00:50

手写React-Redux，拥抱hooks，让状态管理更轻松

在上一篇文章中，我们手写了极简的Redux和中间件，并在React项目中演示了实际使用效果。实际上，Redux是一个JavaScript库，为了在React中方便使用，Redux作者封装了一个专用于React的库——React-Redux。

今天，我们将继续深入React生态系统，了解如何手写React-Redux并结合hooks使用它。通过这种方式，我们不仅可以巩固对Redux的理解，还能拥抱React最新特性，让状态管理变得更加轻松。

剖析React-Redux

React-Redux是一个连接React组件和Redux store的桥梁。它提供了一系列组件和hook，使我们能够轻松访问和管理Redux store中的状态。其核心思想是：

Provider组件： 向应用程序中注入Redux store，使子组件都可以访问它。
connect()函数： 将React组件连接到Redux store，并将其状态映射到组件属性中。
useSelector hook： 在函数组件中直接访问Redux store中的状态。
useDispatch hook： 在函数组件中分发Redux action。

手写React-Redux

手写React-Redux的过程并不复杂，让我们一步一步来：

创建Provider组件：

import React, { createContext } from "react";

export const StoreContext = createContext();

const Provider = ({ children, store }) => {
  return (
    <StoreContext.Provider value={store}>
      {children}
    </StoreContext.Provider>
  );
};

export default Provider;

编写connect()函数：

import { StoreContext } from "./context";

export const connect = (mapStateToProps, mapDispatchToProps) => (Component) => {
  return (props) => {
    const store = React.useContext(StoreContext);
    const state = mapStateToProps(store.getState());
    const dispatch = mapDispatchToProps(store.dispatch);
    return <Component {...state} {...props} {...dispatch} />;
  };
};

实现useSelector hook：

import { StoreContext } from "./context";

export const useSelector = (selector) => {
  const store = React.useContext(StoreContext);
  return selector(store.getState());
};

实现useDispatch hook：

import { StoreContext } from "./context";

export const useDispatch = () => {
  const store = React.useContext(StoreContext);
  return store.dispatch;
};

使用手写React-Redux

有了上述代码，我们就可以在项目中使用手写的React-Redux：

import { Provider, useSelector, useDispatch } from "./my-react-redux";

const MyComponent = () => {
  const state = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {state}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
};

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <MyComponent />
  </Provider>,
  document.getElementById("root")
);