从 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 - 较新的版本会导致错误：

未捕获在状态树中找不到路由器减速器，它必须安装在“路由器”下 #312

---

1.中间件更新

redux-dev-tools和redux-thunk已经包含在 redux-toolkit 中。

如果您需要导入其他中间件，可以使用getDefaultMiddleware添加这些中间件。

如果您想添加一些自定义中间件，但仍希望添加默认中间件，getDefaultMiddleware 很有用：

所以考虑到这一点，你可以从你的package.json中删除redux-thunk 。

---

2.删除redux导入

您不再需要从redux导入createStore 、 compose 、 applyMiddleware 、 combineReducers 。 所有这些都在@reduxjs/toolkit提供的configureStore API 内部处理。

你也可以从package.json中移除redux 。

---

3. 从@reduxjs/toolkit应用 args 到configureStore 。

---

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

// 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
});

如果您将对象传递给configureStore中的reducer参数，则 reducer 将被合并。 所以你不再需要用combineReducers制作一个rootReducer

---

这是一个演示链接。

---

从您最初的帖子来看，您似乎只有三个中间件：

__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。