我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

上一篇文章中,苏南大叔写了redux的文章,运行了redux官方的第一个例子,明确了redux的几个基本概念。包括reducer/dispatch,以及state.value/action.type等等概念。然后,代码就开始提示例子中的createStore()是过期的函数,这就使得redux新人更加一脸懵逼了。

苏南大叔:如何理解redux的toolkit?如何使用@reduxjs/toolkit? - redux-toolkit
如何理解redux的toolkit?如何使用@reduxjs/toolkit?(图4-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里写苏南大叔高兴写的文字。本文描述redux里面的@reduxjs/toolkit的概念。当然,还是阐述苏南大叔自己的理解了,并非官方标准答案。测试环境:node@16.14.2webpack@5.73.0webpack-cli@4.10.0reduxjs/toolkit@1.8.3

基本概念

首先回顾redux的第一个例子:

因为redux觉得自己的第一个例子写的有些混乱,所以再次整理了这些概念,形成了一个新的写法规范。这个就是@reduxjs/toolkit。换汤不换药,还是有由那些基本的概念所组成,然后又增加了一个slice的概念。

@reduxjs/toolkit的官方文档地址,面对新的文档不要害怕,和原来的redux的文档差不多,很多地方是重复的。

苏南大叔:如何理解redux的toolkit?如何使用@reduxjs/toolkit? - redux-toolkit-www
如何理解redux的toolkit?如何使用@reduxjs/toolkit?(图4-2)

关于使用toolkit的官方提示原因的文章:

安装命令:

npm i @reduxjs/toolkit --save

第二个例子

这里结合@reduxjs/toolkit,实现和第一个例子类似的功能。测试代码如下所示,代码有所调整。

import { createSlice, configureStore } from '@reduxjs/toolkit'
const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    decremented: state => {
      state.value -= 1
    },
    incremented: (state,action) => {
      //action:{ type: 'counter/incremented', payload: { num: 3 } }
      state.value += action.payload.num
    }
  }
})
// console.log(counterSlice)
const store = configureStore({reducer: counterSlice.reducer})
store.subscribe(() => console.log(store.getState()))
// export 
const { incremented, decremented } = counterSlice.actions
store.dispatch(incremented({num:3}))
store.dispatch(incremented({num:5}))
store.dispatch(decremented())

这个代码安装常理去直接运行node test2.mjs的话,是会报错的。报错信息如下:

import { createSlice, configureStore } from '@reduxjs/toolkit'
                      ^^^^^^^^^^^^^^
SyntaxError: Named export 'configureStore' not found. The requested module '@reduxjs/toolkit' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@reduxjs/toolkit';
const { createSlice, configureStore } = pkg;

然而官方文档却对此只字不提,报错截图如下:

苏南大叔:如何理解redux的toolkit?如何使用@reduxjs/toolkit? - 错误截图
如何理解redux的toolkit?如何使用@reduxjs/toolkit?(图4-3)

使用webpack

实际上要解决这个问题,就是运行使用webpack包装过的@reduxjs/toolkit代码。回顾webpack的使用问题:

安装webpack命令:

npm i webpack webpack-cli --save-dev

这里先设置webpack.config.js文件:

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './test2.mjs',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'test2.bundle.js',
  },
};

然后设置package.json文件:

{
  "name": "t0",
  "version": "1.0.0",
  "main": "test.js",
  "scripts": {
    "start": "webpack --config webpack.config.js",
    "start2": "node dist/test2.bundle.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.3",
    "redux": "^4.2.0"
  },
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

运行这个@reduxjs/toolkit代码的话,执行下面的代码即可运行:

npm start
npm run start2

运行结果如下:

苏南大叔:如何理解redux的toolkit?如何使用@reduxjs/toolkit? - 运行结果
如何理解redux的toolkit?如何使用@reduxjs/toolkit?(图4-4)

代码解释

说实话,相比较第一版的redux代码,苏南大叔觉得这个新版的@reduxjs/toolkit代码,更加混乱。就提几点自己的感受吧。

  • createSlice()返回值,是个对象,和传递进去的参数不同。把传递的reducers分成了reduceractions
  • reducers里面,不用return,直接修改传递进去的state
  • reducers里面使用(state,action)来定义新的函数的话,解析action.payload可以得到额外的参数。
  • 新版的dispatch()和原版的dispatch()不同,新版的参数是个函数,原版的参数是个{}对象。
名称参数接收参数
原版的dispatch(){type:"a","num":1}acton.type action.num
新版的dispatch()a({"num":1})action.payload.num

相关文章

综述

苏南大叔个人觉得,这个新版的redux-toolkit挺奇怪的,不好用。目前还没能体会到其它的好处。

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   redux