reactjs Redux工具包中的有效负载

qc6wkl3g  于 2022-12-12  发布在  React
关注(0)|答案(2)|浏览(177)

有人能给我解释一下redux-toolkit中的有效负载是什么吗?
这个价值从何而来?

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

export interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer
42fyovps

42fyovps1#

createAction函数创建的action.payload。这三个字段(payloadmetaerror)符合通量标准操作的规范。
有效负载:
可选的payload属性可以是任何类型的值。它表示操作的负载。有关操作的任何信息,如果不是操作的类型或状态,则都应是payload字段的一部分。按照约定,如果errortrue,则payload“应该”是错误对象。这类似于拒绝带有错误对象的承诺。

6ioyuze2

6ioyuze22#

payload是您发送到存储以更新相应reducer的数据的名称。

export const { increment, decrement, incrementByAmount } = counterSlice.actions

incrementdecrementincrementByAmount这些都是动作创建器函数。名称counterSlice.actions容易引起误解,我认为应该是counterSlice.actionCreators。当你调用任何action creator函数时,它返回一个action对象。
action objects是具有两个属性的纯JavaScript对象:

{ type:"spcialTypeName",payload:"data that you are sending" }

如果调用increment(),它将返回:

// type name is created by this pattern: "slicerName/reducerName"
 {type: "counter/increment", payload:undefined}

payloadundefined,因为您没有传递任何东西给action creator函数。但是如果您调用increment("my first task"),它将返回

{type:"counter/increment", payload:"my first task"}

请注意,在redux-toolkit中,不能将多个参数传递给action creators

increment("my first task","my second task")

这不会导致错误,但是你的切片器会接受第一个参数作为有效负载。2如果你需要传递多个参数,你需要传递一个对象。3例如:

increment({firstTask:"my first task",secondTask:"my second task"})`

此操作创建者将返回此

{type:"counter/increment", payload:{firstTask:"my first task",secondTask:"my second task"}}

请注意,这个时间有效负载是一个对象。

相关问题