从 redux 更改为 redux 工具包 [英] changing from redux to redux toolkit

问题描述

Reactjs 新手，尝试通过编码学习，我需要一些代码帮助/建议，将这个 Redux 商店转换为 Redux 工具包，这里我使用名为 configureStore 的函数，有什么好方法可以将其更改为 using'configureStore'来自'@reduxjs/toolkit'这是为了学习目的'createRootReducer' 来自我的 reducers.js，它结合了

New on Reactjs, trying to learn by coding, i need some help/advice with the code, with converting this Redux store to Redux toolkit, here i'm using function called configureStore, what is good way of changing this into using the 'configureStore' which comes from '@reduxjs/toolkit' this is for learning purpose that 'createRootReducer' comes from my reducers.js which combines

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

希望得到任何帮助/建议.我的 store.js:

would appreciate any help/advice. my 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;
}

推荐答案

提前注意:

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

There is an open issue related to connected-react-router.

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

In order to get your setup to work, make sure to install history v4.10.1 - newer versions are causing errors:

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

1.中间件更新

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

The redux-dev-tools and redux-thunk are already included in redux-toolkit.

如果你需要导入额外的中间件，你可以使用 getDefaultMiddleware 添加这些.

If you need to import additional middleware, you can add these in by using getDefaultMiddleware.

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.

So with this in mind, you can remove redux-thunk from your package.json.

2.移除 redux 导入

2. Remove redux imports

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

You no longer need to import createStore, compose, applyMiddleware, combineReducers from redux. All of these are handled internally in the configureStore API provided by @reduxjs/toolkit.

您也可以从 package.json 中删除 redux.

You can also remove redux from package.json.

3.将参数从 @reduxjs/toolkit 应用到 configureStore.

3. Apply args to configureStore from @reduxjs/toolkit.

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

The updated store could look like this:

// 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

If you pass an object to the reducer param in configureStore, the reducers will be combined. So you no longer need to make a rootReducer with combineReducers

这是一个演示链接.

更新

我想指出，从您最初的帖子中可以看出，您似乎只有 3 个中间件:

I wanted to point out that from your initial post, it looks like you only had 3 middlewares:

__REDUX_DEVTOOLS_EXTENSION_COMPOSE__、thunk 和 routerMiddleware.

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

The errors you are seeing happen because @redux/toolkit is offering extra protection for correct immutability and serialization of your state. It does so by including redux-immutable-state-invariant in its default middleware.

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

Your prior setup did not have this middleware, and that's why you are only seeing these errors now. If you had redux-immutable-state-invariant installed, you would've seen these errors in your previous setup.

要实现与之前相同的设置，您不需要包含 defaultMiddleware，但是最好通过您的 reducer 看看为什么您的状态不是不可变和/或可序列化.

To achieve an identical setup to what you had before, you do not need to include the defaultMiddleware, however it would be a very good idea to go through your reducers and see why your state is not immutable and/or serializable.

这里的设置与您之前的设置相同，仅使用 @redux/toolkit

Here is an identical setup to what you had before, only with @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，所以我没有在这里添加它们.您应该仍然可以在浏览器的开发者工具中使用它们.

It looks like the dev tools are configured already: https://redux-toolkit.js.org/usage/usage-guide#store-setup, so I did not add them here. You should be able to still use them in your browser's developer tools.

您应该研究为什么您当前的状态不是不可变/可序列化的.您的状态中可能存在循环引用，或者您的状态在某处直接发生变异.这可能会导致一些令人讨厌的错误，因为 redux 只有在状态不可变的情况下才真正有效.

You should look into why your current state is not immutable/serializable. It is possible there are circular references in your state, or your state is being directly mutated somewhere. This can lead to some nasty bugs down the line, because redux only truly works if the state is immutable.

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

However, you can still use @redux/toolkit with your current setup.

这篇关于从 redux 更改为 redux 工具包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！