设计 Redux 操作时最重要的考虑因素是什么？

Question

如果我遇到这样的情况：一个组件有3个操作（列出所有信息||搜索需要的信息||过滤信息），但是所有这些操作都依赖于相同API，只是参数不同。

我想知道设计 Redux 操作的最佳方法是什么？要设计映射 3 个操作的 3 个动作？或者因为只有 1 个 API 而只有 1 个动作？

设计 Redux Actions 时最重要的考虑因素是什么？

Answer 1

文档中没有任何内容表明操作应映射到 API 端点。因此，您不必考虑拥有多少 API 个端点。

来自http://redux.js.org/docs/basics/Actions.html：

Actions are payloads of information that send data from your application to your store.

但在你的情况下，如果一个带有有效载荷的动作可以完成结果并将你的 state 改变为所需的条件，我看不出有理由使用三个（因此有三个减速器等） ).

Answer 2

它应该是一个还是两个或三个操作实际上取决于你的减速器是如何组织的，以及你的 UI 如何连接到你的商店。

您应该将 API 调用视为您的操作的副作用，而不是操作本身。你的 redux store 持有你的 UI 的特定状态：哪个过滤器处于活动状态？当前的搜索查询是什么？之类的...

设计动作时最重要的考虑因素是：它们对我 UI 的状态意味着什么？它们对它有什么影响？它们与我商店的状态有什么关系？

如果您关心的是 API 调用代码的相互化，有多种模式可以处理该问题：使用一个简单的辅助函数获取参数，使用类似 redux-saga 的东西来触发副作用，等等。但总而言之，API 调用在设计动作时不应该相关。

Answer 3

redux 文档中有一个很好的部分介绍了如何在 redux 应用程序中使用异步 actions/API。

http://redux.js.org/docs/advanced/AsyncActions.html

我一直遵循这种模式，使用 thunk 中间件，发现它工作得非常好。这个想法是让你的动作能够 return 一个功能。您将拥有：

一个 "main" 函数，它将调度应用程序正在进行 API 调用，进行 API 调用，并处理结果。
两个纯动作创建者（return 具有类型和任意数量其他属性的对象的函数）将传递与 API 调用相关的信息给你的缩减器。

操作：

/* Inside ./action.js */

/* This is the function you will dispatch from another component (say, a container component. This takes advantage of thunk middleware. */

export function fetchAllInfo() {

  return function(dispatch) {
    dispatch(requestAllInfo())

    /* Import your API function, make sure it takes a callback as an argument */
    API.fetchAllInfo((allinfo) => {
      dispatch(receiveAllInfo(allinfo))
    }
}

/* Pure action creators */
function requestAllInfo() {
  return {
    type: "REQUEST_ALL_INFO",
  }
}

function receiveAllInfo(allinfo) {
  return {
    type: "RECEIVE_ALL_INFO",
    allinfo,
  }
}

减速器：

/* Inside ./reducer.js */

export function inforeducer(state, action) {
  switch(action.type) {
    case "REQUEST_ALL_INFO": {
      return Object.assign({}, state, {
        /* This can be passed as prop so a component knows to show a loader */
        isFetching: true,
      })
    case "RECEIVE_ALL_INFO": {
      return Object.assign({}, state, {
        isFetching: false,
        allInfo: action.allInfo,
      })
    }
    default:
      return state
  }
}

因此，使用 thunk 中间件（或您自己处理异步调度的方式）和每个 API 调用的回调，您可以使用此方法处理 API 调用调度通话开始和收到结果的时间。

设计 Redux 操作时最重要的考虑因素是什么？

What are the most important considerations when designing Redux actions?

reactjs

redux

react-redux