Javascript object 键和值

Question

createSlice 是一个 function，它接受 object 的 reducer 函数，其中 reducer object 中的键将用于生成字符串操作类型常量，如下所示：

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

没关系，但我对此感到困惑。 这个 object 的键和值在哪里？

reducers: {
    increment(state) {
        state.value++
    },
    decrement(state) {
        state.value--
    },
    incrementByAmount(state, action) {
        state.value += action.payload
    }
}

Answer 1

键是increment 、 decrement和incrementByAmount ，值是函数本身。 这些是“减速器”，它们是作用于您的 state 的函数。

这大致相当于这样说，但语法不同

 reducers: { increment: function(state) { state.value++ }, decrement: function(state) { state.value-- }, incrementByAmount: function(state, action) { state.value += action.payload } }

Answer 2

如果我正确理解你的问题，你是在问reducers object 中的什么被认为是“键”，object 中的“值”是什么。

给定减速器：

reducers: {
  increment(state) {
    state.value++
  },
  decrement(state) {
    state.value--
  },
  incrementByAmount(state, action) {
    state.value += action.payload
  }
}

reducer 键，即increment 、 decrement和incrementByAmount用于生成字符串操作类型常量和操作创建者。 “值”是返回动作对象的动作创建者函数，即(arg) => ({ type, payload: arg }) 。

基本示例：

const increment = (payload) => ({
  type: 'increment' // <-- reducer key is action type
  payload
});

const decrement = (payload) => ({
  type: 'decrement' // <-- reducer key is action type
  payload
});

const incrementByAmount = (payload) => ({
  type: 'incrementByAmount' // <-- reducer key is action type
  payload
});

createSlice是一个 function，它采用您传递给它的配置 object，它生成缩减器 function 和动作创建器函数。 从reducers属性产生的值是动作创建者。

也许在不使用 object 属性赋值速记时更容易理解，而是显式地使用函数。

reducers: {
  increment: function increment(state) {
    state.value++
  },
  decrement: function decrement(state) {
    state.value--
  },
  incrementByAmount: function incrementByAmount(state, action) {
    state.value += action.payload
  }
}

或者

reducers: {
  increment: (state) => {
    state.value++
  },
  decrement: (state) => {
    state.value--
  },
  incrementByAmount: (state, action) => {
    state.value += action.payload
  }
}

现在应该更清楚“键”和“值”之间的区别了。