javascriptreduxredux-actions

What is the purpose of brackets, [], in handleActions()?

I came across a vanilla counter tutorial:

const reducer = handleActions(
  {
    [increment]: state => ({ ...state, counter: state.counter + 1 }),
    [decrement]: state => ({ ...state, counter: state.counter - 1 })
  },
  defaultState
);

I haven't seen in the redux-action docs the purpose and meaning of having to wrap the action inside brackets, [].

Without those, the reducer won't work correctly.

Any ideas?

Solution

  • This is a computed object property name notation, introduced in ES6.

    In a nutshell, it allows you to define objects with variable keys:

    const key = 'someKey';
const obj = {[key]: 1} // {someKey: 1}

    In your particular example, increment is an action, created by const increment = createAction('INCREMENT');, so that's why you need to use [increment] to define a property in your object.