首页 > 其他分享 >redux-toolkit详解

redux-toolkit详解

时间:2023-02-13 18:14:43浏览次数:41  
标签:const reducer toolkit state 详解 increment action redux type

简述

  redux-toolkit是 Redux 官方强烈推荐,开箱即用的一个高效的 Redux 开发工具集,本质是对redux的封装,方便我们写reducer、action creator和继承类似thunk的中间件。

安装

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

configureStore

  在原生的redux里我们用createStore来创建一个store,并传入root reducer函数

  在toolkit里我们用configureStore函数,在对象里我们能进行配置,他还包含一些中间件

// 之前:
const store = createStore(counter)

// 之后:
const store = configureStore({
  reducer: counter
})

createAction

  createAction接收一个 action type 字符串作为参数,并返回一个使用该 type 字符串的 action creator 函数,原来我们则需定义aciton的type,然后使用一个函数来创建一个action对象

// 原本的实现: 纯手工编写 action type 和 action creator
const INCREMENT = 'INCREMENT'

function incrementOriginal() {
  return { type: INCREMENT }
}

console.log(incrementOriginal())
// {type: "INCREMENT"}

// 或者,使用 `createAction` 来生成 action creator:
const incrementNew = createAction('INCREMENT')

console.log(incrementNew())
// {type: "INCREMENT"}

  然后在reducer中就能引用action的type字符串了

const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

function counter(state = 0, action) {
  switch (action.type) {
    case increment.type:
      return state + 1
    case decrement.type:
      return state - 1
    default:
      return state
  }
}

const store = configureStore({
  reducer: counter
})

document.getElementById('increment').addEventListener('click', () => {
  store.dispatch(increment())
})

createReducer

  在reducer里用switch或者if来分情况写state的更新逻辑,非常的繁琐

  createReducer使用"查找表"对象的方式编写 reducer,其中对象的每一个 key 都是一个 Redux action type 字符串,value 是 reducer 函数,我们可以用es6的计算属性从type字符串变量来创建key

const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const counter = createReducer(0, {
  [increment.type]: state => state + 1,
  [decrement.type]: state => state - 1
})

  然后因为计算属性语法将在其中任何变量上调用toString(),我们可以直接使用action creator函数

const counter = createReducer(0, {
  [increment]: state => state + 1,
  [decrement]: state => state - 1
})

createSlice

  我们回顾上面的例子,我们会发现我们为什么要单独写action creator呢,真正有用的是reducer

const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const counter = createReducer(0, {
  [increment]: state => state + 1,
  [decrement]: state => state - 1
})

const store = configureStore({
  reducer: counter
})

document.getElementById('increment').addEventListener('click', () => {
  store.dispatch(increment())
})

  我们可以用createSlice函数,他允许我们提供一个带有reducer函数的对象,并且它根据我们列出的reducer的名称自动生成action type字符串和action creator函数

  createSlice返回一个‘切片’对象,该对象包含被生成的reducer函数,他的actions属性是一个对象,包含所有的action creator函数

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
})

const store = configureStore({
  reducer: counterSlice.reducer
})

document.getElementById('increment').addEventListener('click', () => {
  store.dispatch(counterSlice.actions.increment())
})

  我们可以用解构赋值的语法来获取reducer和actions

const { actions, reducer } = counterSlice
const { increment, decrement } = actions

references

https://cn.redux.js.org/redux-toolkit/overview/

https://redux-toolkit.js.org/introduction/getting-started

https://redux-toolkit-cn.netlify.app/introduction/quick-start

https://redux-toolkit-cn.netlify.app/tutorials/basic-tutorial

 

标签:const,reducer,toolkit,state,详解,increment,action,redux,type
From: https://www.cnblogs.com/CNLayton/p/17116824.html

相关文章

  • 简单解释 什么是Redux
    我已经有一段时间没有写任何东西了。我收到了很多关于在Redux上创建教程的消息!所以就在这里。我花了很多天时间使本教程更加简单易懂。现在让我们开始吧^_^在进入什么是R......
  • Python中如何求1-100的奇数和?方法详解!
    在之前的文章中,老男孩IT教育小编为大家介绍过Python的特点、优势、用途以及薪资待遇等知识,而为了帮助大家更好的掌握Python,小编将为大家讲解一些实战案例,比如:Python中如......
  • Linux最常见的4个截取命令详解!
    在Linux系统中截取命令有很多,但比较常用的截取命令一般包含:cut命令、printf命令、awk命令、sed命令,接下来我们通过这篇文章为大家详细的介绍一下这四个命令。1、cut......
  • python常用的搜索字符内容函数详解:re.findall/findfiter
    区别findall返回listfinditer返回一个MatchObject类型的iterator详细举例介绍1、findall在字符串中找到正则表达式所匹配的所有子串,并返回一个列表,如果没有找到匹配的,则返......
  • react状态管理redux
    redux产生的历史背景当我们的前端系统变得复杂,包含众多子组件,特别是包含很长一条子组件链时。我们的state管理就会非常繁琐,例如如下图,如果Child11需要用到App里的stat......
  • 【JVM】JVM各个内存模型存储内容详解
    1 前言JVM的内存模型,想必大概都清楚了,可以看之前的文章,有讲解。那么JVM每个内存模型里都存哪些内容呢,本文来追一下。2 内存模块存储内容运行时数据区大概分5部分,方......
  • linux uniq命令详解
    Linuxuniq命令读取输入文件,并比较相邻的行。在正常情况下,第二个及以后更多个重复行将被删去,行比较是根据所用字符集的排序序列进行的。该命令加工后的结果写到输出文件中......
  • 详解Nginx配置文件nginx.conf的每行含义
     Nginx配置文件的位置随着安装方式的不同,所在的位置也会不同,通过yum/dnf方式安装,那配置文件是在/etc/nginx/nginx.conf;通过手动编译安装的话可以指定配置文件位置,不指定的......
  • Spring事务管理嵌套事务详解 : 同一个类中,一个方法调用另外一个有事务的方法
    Spring事务机制回顾  Spring事务一个被讹传很广说法是:一个事务方法不应该调用另一个事务方法,否则将产生两个事务. 结果造成开发人员在设计事务方法时束手束脚,生怕一不......
  • log4j配置详解
    一、log4j.rootLogger=INFO,stdout,R●第一个参数为等级,后面可跟一到多个参数,为输出的位置;●例句的意思为将等级为INFO的日志信息使用stdout和R进行输出,stdout和R可以自......