首页 > 其他分享 >react-redux v8.x

react-redux v8.x

时间:2022-10-20 19:59:45浏览次数:81  
标签:Redux 函数 reducer 中间件 react v8 configureStore DevTools redux

@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
 }

标签:Redux,函数,reducer,中间件,react,v8,configureStore,DevTools,redux
From: https://www.cnblogs.com/Running00/p/16811030.html

相关文章

  • react-router-dom v6 使用
    react及相关版本:"react":"^18.2.0","react-dom":"^18.2.0","react-router":"^6.4.2","react-router-dom":"^6.4.2" 实现嵌套路由:目录结构: main.jsximpo......
  • KingbaseES V8R3集群运维案例之---failover故障处理
    案例说明:此案例,为KingbaseESV8R3集群failover切换时,通用的故障处理方式。通过对failover.log和recovery.log日志的解读,让大家了解KingbaseESV8R3集群failover的恢复过程......
  • React + Springboot + Quartz,从0实现Excel报表自动化
    一、项目背景企业日常工作中需要制作大量的报表,比如商品的销量、销售额、库存详情、员工打卡信息、保险报销、办公用品采购、差旅报销、项目进度等等,都需要制作统计图表以......
  • 记录React echart demo实践
    最近在了解学习React,找了个demoEcharts-based-on-React:基于react技术栈,使用Echarts,实现地图深钻、柱状图、折线图、散点图Echarts-based-on-React项目运行1.gitclone......
  • react hooks useState 转同步执行
    之前的错误写法   ......
  • react-redux
    - react-redux:facebook团队发现程序员都喜欢用redux在react项目中管理自己的状态,于是就开发了react-redux,目的是让程序员更方便的在react中使用redux。     ......
  • react 可视化编辑器1
    可视化编辑器1前言前面我们学习低代码,例如百度的低代码平台amis,也有相应的可视化编辑器,通过拖拽的方式生成配置文件。就像这样笔者自己也有类似需求:比如中台有个归档......
  • React遍历数组的时候报错:key需要保持不一样
    需要加上key值,使每个dom不一样报错:{jigui.map((item,index)=>{return<p>{item?.name}</p>;})}不会报错:{jigui.map((item,index)=>{......
  • V8引擎垃圾回收机制
    一、V8引擎是什么?V8引擎是驱动GoogleChrome的JavaScript引擎的名称。是Chrome浏览器和edge浏览器获取我们的JavaScript代码并执行代码的东西。V8提供了JavaSc......
  • React HOOK:useReducer 与 useState区别?(面试)
    useReducervsuseState(面试)useReducer和useState都可以用来管理组件的状态,它们之间最大的区别就是:useReducer将状态和状态的变化统一管理在reducer函数里面,这样对......