Reducer

reducer 是一个函数，接受 state 和 action，返回老的或新的 state 。即：(state, action) => state

增删改

以 todos 为例。

  1. app.model({
  2.   namespace: 'todos',
  3.   state: [],
  4.   reducers: {
  5.     add(state, { payload: todo }) {
  6.       return state.concat(todo);
  7.     },
  8.     remove(state, { payload: id }) {
  9.       return state.filter(todo => todo.id !== id);
  10.     },
  11.     update(state, { payload: updatedTodo }) {
  12.       return state.map(todo => {
  13.         if (todo.id === updatedTodo.id) {
  14.           return { ...todo, ...updatedTodo };
  15.         } else {
  16.           return todo;
  17.         }
  18.       });
  19.     },
  20.   },
  21. };

嵌套数据的增删改

建议最多一层嵌套，以保持 state 的扁平化，深层嵌套会让 reducer 很难写和难以维护。

  1. app.model({
  2.   namespace: 'app',
  3.   state: {
  4.     todos: [],
  5.     loading: false,
  6.   },
  7.   reducers: {
  8.     add(state, { payload: todo }) {
  9.       const todos = state.todos.concat(todo);
  10.       return { ...state, todos };
  11.     },
  12.   },
  13. });

下面是深层嵌套的例子，应尽量避免。

  1. app.model({
  2.   namespace: 'app',
  3.   state: {
  4.     a: {
  5.       b: {
  6.         todos: [],
  7.         loading: false,
  8.       },
  9.     },
  10.   },
  11.   reducers: {
  12.     add(state, { payload: todo }) {
  13.       const todos = state.a.b.todos.concat(todo);
  14.       const b = { ...state.a.b, todos };
  15.       const a = { ...state.a, b };
  16.       return { ...state, a };
  17.     },
  18.   },
  19. });