arco

Reducers

Like Actions, Reducers are created with the scope of a namespaced module, however there are two ways to create a Reducer.

Traditional method

For those most comfortable with the traditional way to create a reducer, you can use the classic functional method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import {
  createStore
} from 'arco';

import module, {
  setName
} from 'modules/app';

const INITIAL_STATE = {
  name: null
};

export default module.createReducer(INITIAL_STATE, ({payload, type}) => {
  switch (type) {
    case `${setName}`:
      return {
        ...state,
        name: payload
      };
      
    default:
      return state;
  }
});

Notice the way you obtain the type matching; importing the function and converting it to a string will return the namespaced type that is dispatched for that action.

Shorthand method

A more concise way to manage the actions is the use of the shorthand mapping method based off of handleActions in redux-actions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import {
  createStore
} from 'arco';

import module, {
  setName
} from 'modules/app';

const INITIAL_STATE = {
  name: null
};

export default module.createReducer(INITIAL_STATE, {
  [setName](state, {payload}) {
    return {
      ...state,
      payload
    };
  }
});

Same result, but far less code to write.