JavaScript对象的键和值

huangapple go评论71阅读模式
英文:

Javascript object keys and values

问题

createSlice是一个函数,接受一个包含reducer函数的对象作为参数,其中reducer对象中的keys将用于生成字符串类型的action常量,如下所示:

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

这是可以的,但我对此感到困惑。
这个对象的keysvalues在哪里?

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

键是 incrementdecrementincrementByAmount, 值是它们自己的函数。 这些是"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键,即incrementdecrementincrementByAmount,用于生成字符串动作类型常量和动作创建函数。 "值"是返回动作对象的动作创建函数,即(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) =&gt; ({ type, payload: arg }).

Basic Example:

const increment = (payload) =&gt; ({
  type: &#39;increment&#39; // &lt;-- reducer key is action type
  payload
});

const decrement = (payload) =&gt; ({
  type: &#39;decrement&#39; // &lt;-- reducer key is action type
  payload
});

const incrementByAmount = (payload) =&gt; ({
  type: &#39;incrementByAmount&#39; // &lt;-- 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) =&gt; {
    state.value++
  },
  decrement: (state) =&gt; {
    state.value--
  },
  incrementByAmount: (state, action) =&gt; {
    state.value += action.payload
  }
}

It should be clearer now the distinction between "key" and "value".

huangapple
  • 本文由 发表于 2023年1月9日 12:50:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/75053296.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定