Redux Toolkit 说这个片段（19 行）是较短的代码（与原来的 12 行相比）混乱

Question

我正在阅读此页面以了解 react-redux https://redux.js.org/introduction/getting-started

看到有 12 行代码（不包括用法、导入和注释）的基本示例，我感到很困惑

然后我在“Redux Toolkit Example”上阅读了这一行，代码下方指出“Redux Toolkit 允许我们编写更短的逻辑，更容易阅读，同时仍然遵循相同的 Redux 行为和数据流。”然而，这个例子是19行代码（不包括用法、导入和注释）

两个例子中的用法都是3行代码。有人可以给我解释一下吗？

也许在扩展时，redux 工具包示例确实节省了更多代码？老实说，我发现基本示例更容易阅读和维护。注意：我是一个完全的新手，这让我相信随着我们的发展和雇用开发人员，基本示例可能会更好。这使他们能够更快地提升（但我只是新手中的一个数据点）

谢谢，院长

Answer 1

关于示例中的代码行，您是对的。也许这个简单的反例并不能说明 Redux Toolkit 可以节省多少代码，因为他们没有在他们的非工具包版本中添加所有的“附加功能”。

本节称为“开始使用 Redux”而不是“迁移到 Redux 工具包”，因此我怀疑他们不想通过引入并非绝对必要的动作创建器函数等最佳实践来压倒用户。但是您没有看到“少写代码”的好处，因为您可以使用 Toolkit 删除的大部分代码都来自最初不在示例中的代码。

动作创作者

createSlice 函数的主要优点之一是它会自动创建动作名称常量和动作创建者函数，以配合 reducer 中的每个案例。

此示例只是直接使用字符串名称 store.dispatch({ type: 'counter/incremented' }) 调度原始操作。大多数开发者不会这样做，因为它非常脆弱和不灵活。

非工具包示例的替代版本，您会在大多数代码中看到的，看起来更像这样：

// action name constants
const INCREMENTED = 'counter/incremented';
const DECREMENTED = 'counter/decremented';

// action creator functions
// usually most take some arguments
const incremented = () => ({
  type: INCREMENTED,
})

const decremented = () => ({
  type: DECREMENTED,
})


// reducer function
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case INCREMENTED:
      return { value: state.value + 1 }
    case DECREMENTED:
      return { value: state.value - 1 }
    default:
      return state
  }
}

如果你想包含打字稿类型，那就更糟了。

不变性

如果您尝试对深度嵌套的数据执行 immutable updates，reducer 本身可能会变得非常冗长。

这是从这些文档中复制的一个示例，说明如何安全地更新属性 state.first.second[someId].fourth

没有工具包

function updateVeryNestedField(state, action) {
  return {
    ...state,
    first: {
      ...state.first,
      second: {
        ...state.first.second,
        [action.someId]: {
          ...state.first.second[action.someId],
          fourth: action.someValue
        }
      }
    }
  }
}

使用工具包：

const reducer = createReducer(initialState, {
  UPDATE_ITEM: (state, action) => {
    state.first.second[action.someId].fourth = action.someValue
  }
})

配置商店

当您组合多个减速器时，工具包 configureStore 实际上确实比 Redux createStore 功能节省了一步。但是这个例子再次未能展示它。相反，Toolkit 版本更长，因为我们设置了 reducer 属性而不是仅仅传递减速器。

典型的 Redux 应用程序使用 combineReducers 实用程序将多个 reducer 组合为一个对象的属性：

import {createStore, combineReducers} from "redux";

const rootReducer = combineReducers({
  counter: counterReducer,
  other: otherReducer
});

const vanillaStore = createStore(rootReducer);

使用 Toolkit，您可以直接传递 reducers 映射而无需调用 combineReducers。

import {configureStore} from "@reduxjs/toolkit";

const toolkitStore = configureStore({
  reducer: {
    counter: counterReducer,
    other: otherReducer
  }
});

代码量大致相同。但它还包括一些默认中间件，这些中间件在非工具包示例中是额外的行。

Redux Toolkit 说这个片段（19 行）是较短的代码（与原来的 12 行相比）混乱

Redux Toolkit says this snippet(19 lines) is shorter code (vs. original 12) confusion

redux

redux-toolkit

动作创作者

不变性

配置商店