1

将字符串传递给 Redux 存储以触发操作而不是简单地在存储上指定其他方法并直接调用这些方法有什么好处？似乎后者可以让人们避免一堆iforswitch语句。例如，来自 Redux 文档：

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

替代：

const todos = {
  addTodo: function(state, action) {
    return [
      ...state,
      {
        text: action.text,
        completed: false
      }
    ]
  },

  completeTodo: function(state, action) {
    return state.map((todo, index) => {
      if (index === action.index) {
        return Object.assign({}, todo, {
          completed: true
        })
      }
      return todo
    })
  }
}
4

1 回答 1

2

我认为可能主要原因是支持以下功能：

记录和重播用户会话，或通过时间旅行实现热重载

https://github.com/reactjs/redux/blob/master/docs/recipes/ReducingBoilerplate.md#actions

感谢@markerikson 在常见问题解答中指出此条目：

为什么“类型”应该是一个字符串，或者至少是可序列化的？

与状态一样，动作可序列化启用了 Redux 的几个定义特性，例如时间旅行调试，以及记录和重放动作。

您可能还会发现有关操作可序列化的讨论很有趣：reactjs/redux#437。

似乎后者可以让人们避免一堆iforswitch语句。

无论如何，这很容易避免：

var actions = {
  ADD_TODO (state, action) {
    return [
      ...state,
      {
        text: action.text,
        completed: false
      }
    ]
  },

  COMPLETE_TODO (state, action) {
    return state.map((todo, index) => {
      if (index === action.index) {
        return Object.assign({}, todo, {
          completed: true
        })
      }
      return todo
    })
  },
};

function todos(state = [], action) {
  var handler = actions[action.type];
  if (handler) return handler(state, action);
  return state;
}

Redux 文档：Reducing Boilerplate中也对此进行了讨论。

于 2016-03-29T13:53:38.010 回答