Redux工具包 - Redux Toolkit的基本使用

Posted 2023-04-07 学全栈的灌汤包

文章目录

• • Redux工具包的使用
  • • Redux Toolkit介绍
    • Redux Toolkit基本使用

Redux工具包的使用

Redux Toolkit介绍

Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。

在前面我们学习Redux的时候应该已经发现，redux的编写逻辑过于的繁琐和麻烦。

并且代码通常分拆在多个文件中(虽然也可以放到一个文件管理，但是代码量过多，不利于管理);

Redux Toolkit包旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题;

在很多地方为了称呼方便，也将之称为“RTK”;

安装Redux Toolkit:npm install @reduxjs/toolkit react-redux

Redux Toolkit的核心API主要是如下几个:

configureStore: 包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的 slice reducer，添加你提供 的任何 Redux 中间件，redux-thunk默认包含，并启用 Redux DevTools Extension。

createSlice: 接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有相应的actions。

createAsyncThunk: 接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分 派动作类型的 thunk

---

Redux Toolkit基本使用

configureStore用于创建store对象，常见参数如下:

reducer: 将slice中的reducer可以组成一个对象传入此处;

middleware:可以使用参数，传入其他的中间件(自行了解);

devTools:是否配置devTools工具，默认为true;

import  configureStore  from "@reduxjs/toolkit"

// 导入reducer
import counterReducer from "./features/counter"

const store = configureStore(
  reducer: 
    counter: counterReducer
  ,
  // 例如可以关闭redux-devtool
  devTools: false
)

export default store

createSlice主要包含如下几个参数:

name:用户标记slice的名词

在之后的redux-devtool中会显示对应的名词;

initialState:初始化值

第一次初始化时的值;

reducers:相当于之前的reducer函数

对象类型，对象中可以添加很多的函数;

函数类似于redux原来reducer中的一个case语句;

函数的参数:

• 参数一: state, 当前的state状态
• 参数二: 传递的actions参数, actions有两个属性, 一个是自动生成的type, 另一个是传递的参数放在payload中;

createSlice返回值是一个对象，包含所有的actions;

import  createSlice  from "@reduxjs/toolkit"

const counterSlice = createSlice(
  name: "counter",
  initialState: 
    counter: 99
  ,
  reducers: 
    // 直接对actions解构拿到payload
    changeNumber(state,  payload ) 
      state.counter = state.counter + payload
    
  
)

// reducers当中的方法会放在counterSlice的actions中, 用于派发action
export const  changeNumber  = counterSlice.actions

// 注意: 导出的是reducer, 用于在index.js中对reducer进行组合
export default counterSlice.reducer

接下来使用store中的counter数据和修改counter的操作和之前一样, 借助于react-redux库进行连接使用

import React,  PureComponent  from 'react'
import  connect  from 'react-redux'
import  changeNumber  from '../store/features/counter'

export class Home extends PureComponent 
  changeNumber(num) 
    this.props.changeNumber(num)
  

  render() 
    const  counter  = this.props

    return (
      <div>
        <h2>Home</h2>
        <h2>当前计数: counter</h2>
        <button onClick=() => this.changeNumber(5)>+5</button>
        <button onClick=() => this.changeNumber(10)>+10</button>
      </div>
    )
  


// 映射要使用的store中的数据
const mapStateToProps = (state) => (
  counter: state.counter.counter
)
// 映射要派发的方法
const mapDispatchToProps = (dispatch) => (
  changeNumber(num) 
    dispatch(changeNumber(num))
  
)

export default connect(mapStateToProps, mapDispatchToProps)(Home)

WebStorm 中的 Redux-toolkit 操作参数

【中文标题】WebStorm 中的 Redux-toolkit 操作参数

【英文标题】：Redux-toolkit action arguments in WebStorm

【发布时间】：2021-02-04 02:29:17

【问题描述】：

我开始使用 redux 工具包，但是当我尝试发送带有参数的操作时，我收到了来自 IDE 的警告：

“参数类型 ... 不可分配给参数类型 payload: ...”

或“参数数量无效，应为 2”

我猜它认为状态应该是第一个参数。

有什么办法可以改正吗？

编辑： 我为这个特定问题找到了一个临时解决方案。 基本上，我所做的是将这些操作移出文件。

如果我之前有：

// reducer.js
const state = createSlice(
  // ...
  reducers: 
    handleNumber(state, action)
  
)

export const  handleNumber  = state.actions
export default state.reduer

现在我有：

// reducer.js
export const state = createSlice(
  // ...
  reducers: 
    handleNumber(state, action)
  
)

export default state.reducer

// actions.js
import  state  from './reducer'

export const  handleNumber  = state.actions

正如评论中所说。如果这些名称在同一个文件中，Webstorm 似乎可以匹配内容。但如果它们位于不同的文件中，它会查看 typescript 定义。

但它引发了另一个问题，现在当我 Ctrl + 单击 actions.js 中的函数名称时，它不是转到函数，而是导航到类型声明。

【参考方案1】：

RTK 共同维护者在这里。这看起来很好奇，绝对应该有效。 我想更深入地研究一下。能否请您创建一个包含此问题的复制存储库并将其发布到我们的 github 问题跟踪器？

【讨论】：

这里是repo，我还在assets文件夹中添加了一张图片。 github.com/andrei9669/redux-toolkit-webstorm

我明白了。与 VSCode 不同，它会在后台使用 TypeScript 编译器来找出方法的类型，即使您正在编写 JavaScript，WebStorm 似乎也只是按名称进行模式匹配。然后它不知道内部原理，只是“猜测”setNumberA 对应于 reducer 定义，这显然是错误的。我很抱歉这么说，但在这种情况下，只是工具较差。对此真的无能为力:(

看起来问题已经有一段时间了。 youtrack.jetbrains.com/issue/WEB-42559

【参考方案2】：

我遇到过类似的问题，我不确定是什么导致了问题，但我发现删除/重命名您的（隐藏的）.idea 文件夹很有用。之后重新启动 Webstorm，它应该会生成一个新的 .idea 文件夹。

所以问题似乎是Webstorm IDEA默认设置中的某些东西导致了这个问题。如果不确定是否要保留某些设置，请务必先重命名 .idea 文件夹。

希望这行得通！

【参考方案3】：

我遇到了同样的问题，但删除 .idea 并重新启动 ide 有效。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。