英文:
Javascript object keys and values
问题
createSlice是一个函数,接受一个包含reducer函数的对象作为参数,其中reducer对象中的keys将用于生成字符串类型的action常量,如下所示:
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
},
})
这是可以的,但我对此感到困惑。
这个对象的keys和values在哪里?
reducers: {
increment(state) {
state.value++
},
decrement(state) {
state.value--
},
incrementByAmount(state, action) {
state.value += action.payload
}
}
英文:
createSlice is
a function that accepts an object of reducer functions where keys in the reducer object will be used to generate string action type constants like this:
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
},
})
That is ok but I am confused about this.
where are the keys and values of this object?
reducers: {
increment(state) {
state.value++
},
decrement(state) {
state.value--
},
incrementByAmount(state, action) {
state.value += action.payload
}
}
答案1
得分: 0
键是 increment
, decrement
和 incrementByAmount
, 值是它们自己的函数。 这些是"reducers",它们是操作您的状态的函数。
它大致相当于说这个,但语法不同
reducers: {
increment: function(state) {
state.value++
},
decrement: function(state) {
state.value--
},
incrementByAmount: function(state, action) {
state.value += action.payload
}
}
英文:
The keys are increment
, decrement
, and incrementByAmount
, the values are the functions themselves. These are "reducers", which are functions that act on your state.
It's roughly equivalent to saying this, but with a different syntax
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
reducers: {
increment: function(state) {
state.value++
},
decrement: function(state) {
state.value--
},
incrementByAmount: function(state, action) {
state.value += action.payload
}
}
<!-- end snippet -->
答案2
得分: 0
如果我正确理解你的问题,你正在询问在reducers
对象中,什么被认为是“键”和什么是该对象中的“值”。
给定以下reducers:
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
是一个函数,它接受您传递给它的配置对象,并生成reducer函数和动作创建函数。 从reducers
属性产生的值就是动作创建函数。
也许不使用对象属性分配简写,并显式使用函数会更容易理解,如下所示:
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
}
}
现在区分“键”和“值”应该更清晰了。
英文:
If I'm understanding your question correctly you are asking what in the reducers
object is considered the "key" and what is the "value" within that object.
Given the reducers:
reducers: {
increment(state) {
state.value++
},
decrement(state) {
state.value--
},
incrementByAmount(state, action) {
state.value += action.payload
}
}
The reducer keys, i.e. increment
, decrement
, and incrementByAmount
are used to generate string action type constants and action creators. The "values" are the action creator functions that return action objects, i.e. (arg) => ({ type, payload: arg })
.
Basic Example:
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
is a function that takes the configuration object you pass to it and it generates the reducer function and action creator functions. The values produced from the reducers
property are the action creators.
Perhaps it would be easier to see when not using the object property assignment shorthand, and use functions explicitly instead.
reducers: {
increment: function increment(state) {
state.value++
},
decrement: function decrement(state) {
state.value--
},
incrementByAmount: function incrementByAmount(state, action) {
state.value += action.payload
}
}
or
reducers: {
increment: (state) => {
state.value++
},
decrement: (state) => {
state.value--
},
incrementByAmount: (state, action) => {
state.value += action.payload
}
}
It should be clearer now the distinction between "key" and "value".
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论