javascript - 在Redux中，使用actionCreators有什么好处？

Question

我目前正在学习 Redux，但遇到了障碍，我的问题是，为什么应用程序在没有操作的情况下需要操作？他们添加了什么？

import { createStore } from 'redux'

// ACTIONS
const addTodo = (text) => {
  type: 'ADD_TODO',
  text
}

const toggleTodo = (id) => {
  type: 'TOGGLE_TODO',
  id
}

// REDUCER
const todos = (state = [], action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: state.length,
          text: action.text,
          complete: false
        }
      ]
    default:
      return state
  }
}

// STORE
const store = createStore(todos)

// TEST
store.dispatch({ type: 'ADD_TODO', text: 'Test' })
console.log(store.getState())

Answer 1

首先，不要混淆 ActionCreators 和 Actions，它们是不同的东西。

操作只是具有type属性的对象(以及您想要添加的任何其他内容)。

ActionCreators根据提供的逻辑和数据构建操作。例如，假设一个操作“更新联系人”，那么操作创建者可能会构建为异步流的 thunk，它将向 API 分派(dispatch)网络请求以更新联系人，一旦它知道 API 调用有效，它就会分派(dispatch)操作，可能类似于:

{
  type: "UPDATE_CONTACT",
  data: { prop: "newValue" }
}

使用常量这可以方便地在较大的代码库上进行维护/调试。通过使用常量，您的环境将更快地标记拼写错误的操作，因为常量将不存在。如果您纯粹依赖对象文字或字符串，调试起来可能会更复杂。

为什么使用 Action 创建器

ActionCreators 有两个主要用途:

可移植性和可测试性 as per the redux docs

我还发现它们对于动态构建最终操作数据很有用。根据我上面的示例，如果您要发布联系人，服务器通常会使用 LOCATION header 进行响应，为您提供联系人的新位置(和可能的 ID)，您将 future 需要 GET 或 PUT 请求。使用 actionCreator，我可以将新数据捆绑到最终的操作对象中，该对象看起来如下所示:

{
  type: "CREATE_CONTACT",
  data: {
    first_name: "bob",
    last_name: "builder"
    id: 7         // -> provided by API, the actionCreator injected it
  }
}