react-redux v8.x

@reduxjs/toolkit

• 使用Redux Toolkit简化设置
  Redux核心库被有意地取消了。它可以让您决定如何处理所有事情，比如商店设置、您的状态包含什么以及如何构建缩减器。
  这在某些情况下很好，因为它给了你灵活性，但这种灵活性并不总是需要的。有时，我们只想以最简单的方式开始，使用一些开箱即用的良好默认行为。
  ReduxToolkit包旨在帮助简化几个常见的Redux用例，包括商店设置。让我们看看它如何帮助改进商店设置过程。
  Redux Toolkit包括一个预构建的configureStore函数，如前面的示例所示。
  最快的使用方法是只传递根reducer函数：

请注意，它接受一个具有命名参数的对象，以便更清楚地传递什么。

默认情况下，从Redux Toolkit配置存储将：

使用默认的中间件列表调用applyMiddleware，包括redux-thunk，以及一些捕获常见错误（如变化状态）的仅用于开发的中间件

调用composeWithDevTools以设置Redux DevTools扩展
下面是使用Redux Toolkit的热重新加载示例：

这无疑简化了一些设置过程。

https://redux.js.org/usage/configuring-your-store#simplifying-setup-with-redux-toolkit

• configureStore : https://redux-toolkit.js.org/api/configureStore
  标准Redux-createStore函数的友好抽象，为存储设置添加了良好的默认值，以获得更好的开发体验。
  configureStore接受单个配置对象参数，具有以下选项：

  • reducer
    • 如果这是一个单一函数，它将直接用作存储的根缩减器。
    • 如果它是切片缩减器的对象，如｛users:usersReducer，posts:postsReducer｝，configureStore将通过将该对象传递给Redux combineReducer实用程序来自动创建根缩减器。
  • middleware
    • 可选的Redux中间件函数数组
    • 如果提供了此选项，它应该包含要添加到存储中的所有中间件功能。configureStore将自动将其传递给applyMiddleware。
    • 如果希望添加或自定义默认中间件，可以传递一个回调函数，该函数将接收getDefaultMiddleware作为其参数，并应返回中间件数组。
    • 有关中间件参数如何工作以及默认添加的中间件列表的更多详细信息，请参阅getDefaultMiddleware文档页面。
  • devTools
    • 如果这是布尔值，它将用于指示configureStore是否应自动启用对Redux DevTools浏览器扩展的支持。
    • 如果它是一个对象，那么将启用DevTools扩展，并且选项对象将传递给composeWithDevtools（）。有关可用的特定选项列表，请参阅DevTools Extension docs for EnhancerOptions。
    • 默认为true。
  • trace
    • Redux DevTools扩展最近添加了对显示操作堆栈跟踪的支持，该跟踪可以精确显示每个操作的调度位置。捕获跟踪可能会增加一些开销，因此DevTools扩展允许用户通过设置“trace”参数来配置是否捕获动作堆栈跟踪。如果通过传递true或对象启用DevTools，那么configureStore将默认为仅在开发模式下启用捕获动作堆栈跟踪。
  • preloadedState
    • 预加载状态
    • 要传递给Redux createStore函数的可选初始状态值。
  • enhancers: 增强
    • 一个可选的Redux存储增强器数组，或一个用于自定义增强器阵列的回调函数。
      如果定义为数组，这些将被传递给Redux-compose函数，而组合的增强器将被传递到createStore。
    • 这不应包括applyMiddleware（）或ReduxDevTools扩展composeWithDevTools，因为这些已经由configureStore处理。
    • 示例：增强器：[offline]将导致[applyMiddleware，offline，devToolsExtension]的最终设置。
    • 如果定义为回调函数，则将使用不带DevTools Extension（当前为[applyMiddleware]）的现有增强器数组调用该函数，并应返回一个新的增强器阵列。这主要适用于需要在applyMiddleware前面添加商店增强器的情况，例如redux first router或redux offline。
    • 示例：enhancers:（defaultEnhancers）=>[offline，…defaultEnchancers]将导致[offline、applyMiddleware、devToolsExtension]的最终设置。

• createSlice

  • 一个函数，它接受一个初始状态、一个reducer函数的对象和一个“切片名称”，并自动生成对应于reducer和state的动作创建者和动作类型。
  • 此API是编写Redux逻辑的标准方法。
  • 在内部，它使用createAction和createReducer，因此您也可以使用Immer编写“可变”的不可变更新：
  • Parameters
    • 参数
    • createSlice接受具有以下选项的单个配置对象参数：
      • initialState（初始状态）
        • 此状态片段的初始状态值。
        • 这也可能是一个“惰性初始化器”函数，它应该在调用时返回初始状态值。无论何时使用undefined作为其状态值调用reducer时，都会使用此方法，这主要用于从localStorage读取初始状态等情况
      • name 名称
        • 此状态片段的字符串名称。生成的操作类型常量将使用此作为前缀。
      • reducers
        • 包含Redux“case reducer”函数（用于处理特定操作类型的函数，相当于开关中的单个case语句）的对象。
        • 对象中的键将用于生成字符串操作类型常量，当它们被分派时，它们将显示在ReduxDevTools扩展中。此外，如果应用程序的任何其他部分碰巧发送了具有完全相同类型字符串的操作，则会运行相应的reducer。因此，您应该为函数提供描述性名称。
        • 这个对象将被传递给createReducer，因此reducer可以安全地“变异”给定的状态。
        • 自定义生成的动作创建器
        • 如果您需要通过prepare回调自定义动作创建者的有效载荷值的创建，那么reducers参数对象的相应字段的值应该是一个对象，而不是一个函数。此对象必须包含两个属性：reducer和prepare。reducer字段的值应为case reducer函数，而prepare字段的值则应为prepare回调函数：
      • extraReducers
  • 返回值
    • createSlice将返回如下所示的对象：

 {
   name : string,
   reducer : ReducerFunction,
   actions : Record<string, ActionCreator>,
   caseReducers: Record<string, CaseReducer>.
   getInitialState: () => State
 }