从 Redux 更改为 Redux Toolkit

Question

我是 React 新手，正在尝试通过编码来学习。

我需要一些代码方面的帮助/建议，将此 Redux 存储转换为 Redux Toolkit。这里我使用一个名为configureStore的函数。将其更改为使用来自“@reduxjs/toolkit”的“configureStore”的好方法是什么？

这是出于学习目的。那个“createRootReducer”来自我的reducers.js，它结合了

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

我的store.js文件：

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

Answer 1

提前注意：

有一个与 相关的未决问题connected-react-router。

为了让您的设置正常工作，请确保安装history v4.10.1- 较新的版本会导致错误：

Uncaught 无法在状态树中找到路由减速器，它必须安装在“router”下 #312

1.中间件更新

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

如果需要导入其他中间件，可以使用getDefaultMiddleware.

如果您想添加一些自定义中间件，但仍想添加默认中间件，则 getDefaultMiddleware 非常有用：

因此，考虑到这一点，您可以redux-thunk从您的package.json.

2. 删除redux导入

您不再需要从导入createStore, compose, applyMiddleware, 。所有这些都在.combineReducersreduxconfigureStore@reduxjs/toolkit

您还可以redux从 中删除package.json。

3. 将 args 应用于configureStorefrom @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
});

如果将一个对象传递给reducerin 中的参数configureStore，则减速器将被组合。所以你不再需要rootReducer与combineReducers

这是一个演示链接。

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

__REDUX_DEVTOOLS_EXTENSION_COMPOSE__，thunk， 和routerMiddleware。

您看到的错误之所以发生，@redux/toolkit是因为为状态的正确不变性和序列化提供了额外的保护。它通过包含redux-immutable-state-invariant在其默认中间件中来实现这一点。

您之前的设置没有此中间件，这就是您现在只看到这些错误的原因。如果您已redux-immutable-state-invariant安装，您会在之前的设置中看到这些错误。

要实现与之前相同的设置，您不需要包含defaultMiddleware，但是，检查您的化简器并了解为什么您的状态不是不可变和/或可序列化的，这将是一个非常好的主意。

这是与之前相同的设置，只是@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。