javascript - 从 Redux 更改为 Redux 工具包

Question

我是 React 的新手，正在尝试通过编码来学习。
我需要一些关于代码的帮助/建议，将这个 Redux 存储转换为 Redux Toolkit。这里我使用了一个名为 configureStore 的函数。将其更改为使用来自“@reduxjs/toolkit”的“configureStore”的好方法是什么？
这是出于学习目的。
'createRootReducer' 来自我的 reducers.js，它结合了

const createRootReducer = (history) => combineReducers({
    articles: articlesReducer,
    selection: selectionReducer,
});

我的 store.js 文件:

import { createBrowserHistory } from "history";
import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { routerMiddleware } from "connected-react-router";
import createRootReducer from "./reducers";

export const history = createBrowserHistory();

const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default function configureStore(preloadedState) {
  const store = createStore(
    createRootReducer(history),
    preloadedState,
    storeEnhancers(applyMiddleware(routerMiddleware(history), thunk))
  );
  return store;
}

Answer 1

提前备注:
有一个与 connected-react-router 相关的未解决问题.
为了使您的设置正常工作，请确保安装 history v4.10.1 - 较新的版本会导致错误:
Uncaught Could not find router reducer in state tree, it must be mounted under "router" #312

1. 中间件更新redux-dev-tools和 redux-thunk已经包含在 redux-toolkit 中。
如果您需要导入额外的中间件，您可以使用 getDefaultMiddleware 添加这些中间件.

getDefaultMiddleware is useful if you want to add some custom middleware, but also still want to have the default middleware added as well:

因此，考虑到这一点，您可以删除 redux-thunk来自您的 package.json .

2. 删除redux进口
您不再需要导入 createStore , compose , applyMiddleware , combineReducers来自 redux .所有这些都在 configureStore 内部处理。 API 由 @reduxjs/toolkit 提供.
您也可以删除 redux来自 package.json .

3. 将 args 应用于 configureStore来自 @reduxjs/toolkit .

更新后的商店可能如下所示:

// IMPORTANT: be sure to install history v4.10.1
// see open issue: https://github.com/supasate/connected-react-router/issues/312#issuecomment-647082777
import { createBrowserHistory, History } from "history";
import { configureStore } from "@reduxjs/toolkit";
import {
  routerMiddleware,
  connectRouter,
  RouterState
} from "connected-react-router";
import selectionReducer from "./reducers/selection";
import articlesReducer from "./reducers/articles";
import todosReducer, { I_TodoState } from "./reducers/todos";

export const history = createBrowserHistory();

// combineReducers will be handled internally by configureStore
const rootReducer = (history: History<any>) => ({
  articles: articlesReducer,
  selection: selectionReducer,
  todos: todosReducer,
  router: connectRouter(history)
});

const preloadedState = {};
export const store = configureStore({
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(routerMiddleware(history)),
  reducer: rootReducer(history),

  preloadedState
});

如果您将对象传递给 reducer configureStore 中的参数， reducer 将被合并。所以你不再需要制作 rootReducer与 combineReducers
这是 demo link .

从您最初的帖子来看，您似乎只有三个中间件: __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ , thunk , 和 routerMiddleware .
您看到的错误是因为 @redux/toolkit为您的状态的正确不变性和序列化提供额外的保护。它通过包含 redux-immutable-state-invariant 来实现。在其默认中间件中。
您之前的设置没有此中间件，这就是您现在只看到这些错误的原因。如果您有 redux-immutable-state-invariant安装，您会在之前的设置中看到这些错误。
要获得与以前相同的设置，您不需要包含 defaultMiddleware ，但是最好通过你的 reducer 看看为什么你的状态不是不可变的和/或可序列化的。
这是与您之前的设置相同的设置，仅使用 @redux/toolkit

import { configureStore } from '@reduxjs/toolkit';
import { routerMiddleware, connectRouter } from 'connected-react-router';
import { createBrowserHistory } from 'history';
import thunk from 'redux-thunk';
import { rootReducer } from './reducer';

export const history = createBrowserHistory();

// combineReducers will be handled internally by configureStore
const rootReducer = (history) => ({
  articles: articlesReducer,
  selection: selectionReducer,
  router: connectRouter(history)
});

const preloadedState = {};
export const store = configureStore({
  middleware: [thunk, routerMiddleware(history)],
  reducer: rootReducer(history),
  preloadedState,
});

似乎已经配置了开发工具: Store Setup ，所以我没有在这里添加它们。您应该仍然可以在浏览器的开发人员工具中使用它们。
您应该研究为什么您的当前状态不是不可变/可序列化的。您的状态中可能存在循环引用，或者您的状态在某处被直接突变。这可能会导致一些令人讨厌的错误，因为 Redux 只有在状态不可变的情况下才能真正起作用。
但是，您仍然可以在当前设置中使用 @redux/toolkit。