Javascript object keys and values

Question

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
    }
}

Answer 1

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

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

Answer 2

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, ie 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, ie (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".