如何理解redux的toolkit？如何使用@reduxjs/toolkit？

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

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

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

基本概念

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

• https://newsn.net/say/redux.html

因为redux觉得自己的第一个例子写的有些混乱，所以再次整理了这些概念，形成了一个新的写法规范。这个就是@reduxjs/toolkit。关于使用toolkit的官方提示原因的文章：

• https://redux.js.org/introduction/why-rtk-is-redux-today

换汤不换药，还是由那些基本的概念所组成，然后又增加了一个slice的概念。@reduxjs/toolkit的官方文档地址如下（面对新的文档不要害怕，和原来的redux的文档差不多，很多地方是重复的）：

• https://redux-toolkit.js.org/

安装命令：

npm i @reduxjs/toolkit --save

@reduxjs/toolkit官方例子

这里结合@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;

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

解决方案一，使用webpack

实际上要解决这个问题，就是运行使用webpack包装过的@reduxjs/toolkit代码。点击下面的链接，可以回顾一下webpack的使用问题：

• https://newsn.net/say/webpack.html

安装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

运行结果如下：

解决方案二，import变require

实际上把官方的import导入换成require语句就可以在node命令行下面运行了。

const { createSlice, configureStore } = require("@reduxjs/toolkit");

代码解释

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

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

相关文章

• https://newsn.net/say/redux.html
• https://newsn.net/say/redux-toolkit.html
• https://redux-toolkit.js.org/

综述

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

• https://newsn.net/tag/redux/

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