从 redux 更改为 redux 工具包

Question

Reactjs 的新功能，尝试通过编码来学习，我需要一些 help/advice 代码，将这个 Redux 存储转换为 Redux 工具包，这里我使用名为 configureStore 的函数，什么是好的方法将其更改为使用 'configureStore' 来自 '@reduxjs/toolkit' 这是为了学习目的 'createRootReducer' 来自我的 reducers.js，它结合了

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

将不胜感激 help/advice。我的 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 - 较新的版本导致错误：

https://github.com/supasate/connected-react-router/issues/312#issuecomment-647082777

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:

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

2。删除 redux 导入

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

提供的 configureStore API 内部处理

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

3。从 @reduxjs/toolkit.

向 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

这里是demo link.

更新

我想指出，从您最初的 post 来看，您似乎只有 3 个中间件：

__REDUX_DEVTOOLS_EXTENSION_COMPOSE__、thunk 和 routerMiddleware.

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

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

要实现与之前相同的设置，您不需要包含 defaultMiddleware，但是最好检查一下您的 reducer 并了解为什么您的状态不是不可变的and/or 可序列化。

这里的设置与您之前的设置相同，只是 @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,
});

看起来开发工具已经配置好了：https://redux-toolkit.js.org/usage/usage-guide#store-setup，所以我没有在这里添加它们。您应该仍然可以在浏览器的开发人员工具中使用它们。

你应该看看为什么你现在的状态不是immutable/serializable。您的状态中可能存在循环引用，或者您的状态在某处被直接变异。这可能会导致一些严重的错误，因为 redux 只有在状态不可变的情况下才能真正工作。

但是，您仍然可以在当前设置中使用@redux/toolkit。

从 redux 更改为 redux 工具包

changing from redux to redux toolkit

javascript

typescript

reactjs

react-redux

redux-toolkit