redux & react-redux & @reduxjs/toolkit

redux团队先后推出了redux、react-redux、@reduxjs/toolkit，这三个库的api各有不同。本篇文章就来梳理一下当我们需要在项目中集成redux，从直接使用redux，到使用react-redux，再到react-redux和@reduxjs/toolkit配合使用，分别需要调用到哪些api。

一、在react中集成redux

redux中通过createStore可以创建出store实例，在该实例上存在三个实例方法。

通过store.subscribe可以监听到state的改变，引起组件的重新渲染。

通过dispatch可以分发action，引起redux内部state的更新。

通过getState可以获取到redux内部的state。

以一个简单的计数器程序作为示例。

首先在App组件中引入Count组件，为其传入store实例作为props。

import React from "react";
import Count from "./components/Count";
import store from "./store";

export default function App() {
  return <Count store={store} />;
}

在Count组件中，我们在组件挂载后通过store.subscribe监听redux的state，通过store,getState获取state，为按钮绑定点击事件，回调调用dispatch，传入action的返回值作为参数。

import React, { useEffect, useState } from "react";
import store from "../store";
import { createAddActions } from "../store/actions/count";

export default function Count() {
  const [_, rerender] = useState({});
  useEffect(() => {
    store.subscribe(() => rerender({}));
  }, []);
  return (
    <div>
      <div>sum: {store.getState()}</div>
      <button onClick={() => store.dispatch(createAddActions(1))}>
        点我+1
      </button>
    </div>
  );
}

接下来是store的编写。

// store/index.js

import { countReducer } from "./reducers/count";
import { createStore } from "redux";

export default createStore(countReducer);

reducers必须是一个纯函数，纯函数的概念是需要返回一个新的state替换原来的state，而不是直接在原来的state上修改。

// store/reducers/count.js

export function countReducer(prevState, action) {
  switch (action.type) {
    case "add":
      return prevState + action.value;
    default:
      return 0;
  };
};

action的实现。

// store/actions/count.js

export function createAddActions(value) {
  return {
    type: "add",
    value,
  };
};

二、在react中集成react-redux

react-redux提出了容器组件的概念，要求redux只能和容器组件进行通信，至于ui组件，只能通过props来获取容器组件传入的state和引起redux内部state改变的callback。

引入容器组件的目的在于尽量让ui组件内部看起来与其他不需要使用redux的组件无异。

如何理解无异呢？就是不要直接去调用store的实例方法，而是调用父组件提供的方法。当我们调用父组件提供的方法，而react-redux会再调用store的实例方法。

store.getState() -> props.state

store.dispatch() -> props.callback()

store.subscribe不再手动调用，而是由react-redux执行。

Count.js修改如下。

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { createAddActions } from "../store/actions/count";

function Count(props) {
  return (
    <div>
      <div>sum: {props.state}</div>
      <button onClick={() => props.add(1)}>点我+1</button>
    </div>
  );
}

export default connect(
  (state) => ({ state }),
  (dispatch) => ({
    add: (number) => dispatch(createAddActions(number)),
  })
)(Count);

connect的第二个参数还可以简写为对象形式。

export default connect((state) => ({ state }), { add: createAddActions })(Count);

我们使用redux的目的是在多个组件之间共享state，所以我们直接引用redux时，需要在多个组件中传入store作为props，react-redux针对此也做了优化。

我们只需引入Provider包裹App组件，在Provider中传入store作为props，我们就可以在容器组件中获取到props。其实底层就是调用了react的SomeContext.Provider，内部组件只要使用useContext就可以获取到store。

// index.js

import React from "react";
import ReactDOM from 'react-dom/client';
import { Provider } from "react-redux";
import store from "./store";
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <App />
    </Provider>
);

在Count组件中，我们不再需要手动传入store。

import React from "react";
import Count from "./components/Count";

export default function App() {
  return <Count />;
}

在现在的react-redux中，更推荐使用useSelector和useDispatch来代替connect。当我们使用useSelector和useDispatch获取state和分发action时，不再存在container组件，取而代之的是selector hook和dispatch hook。

对于connect而言，会优先从props中获取store，不存在的情况下再用React.useContext获取props，所以store有两种传入方式。

对于useSelector和useDispatch而言，他们只是Hook而不是组件，没有props，只能从React.useContext中获取store，所以如果外层没有Provider组件的话，项目是无法运行的。

此外，connect和Provider都实现了对store的监听。

import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { createAddActions } from "../store/actions/count";

export default function Count() {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  return (
    <div>
      <div>sum: {state}</div>
      <button onClick={() => dispatch(createAddActions(1))}>点我+1</button>
    </div>
  );
}

三、在React中集成@reduxjs/toolkit和react-redux

@reduxjs/toolkit的作用如下：

1. 将initialState、reducers、actions整合在一起形成切片

2. 自动生成action，{name: sliceName/reducerName, payload: value}

3. 代替redux/thunk实现异步action功能

// store/slices/count.js

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    add: (state, action) => {
      return state + action.payload;
    },
  },
});

export const { add } = counterSlice.actions;

export default counterSlice.reducer;

// store/index.js

import countReducer from "./slices/count";
import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: countReducer // reducer的结构对应state的结构
});