Question

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

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

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

Answer 1

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

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

操作是从您的数据发送数据的信息的有效负载申请到您的商店。

在你的情况下，如果一个带有效载荷的动作可以完成结果并将var d = new Date(); var n = d.getDay() var h = d.getHours(); if (n == 1) { if (h >= 22 && h < 12) { $(".enter-button").remove(); } if (h > 15 && h <= 17) $(".enter-button").remove(); } else { $(".enter-button").css("display", "block"); }变为所需的条件，我看不出使用三个的原因（因此有三个减速器等）。

Answer 2

它应该是一个还是两个或三个动作真的取决于您的减速器的组织方式，以及您的UI如何连接到您的商店。

您应该将API调用视为操作的副作用，而不是操作本身。您的redux商店保存您的UI的特定状态：什么过滤器处于活动状态？目前的搜索查询是什么？等等...

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

如果您关注的是共享API调用代码，可以使用各种模式来处理：使用一个简单的辅助函数来获取参数，使用像redux-saga这样的东西来触发副作用等等。但总而言之，API在设计动作时，调用不应该是相关的。

Answer 3

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

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

我使用thunk中间件跟踪了这种模式，发现它工作得非常好。这个想法是让你的行为能够返回一个功能。你将拥有：

A＆＃34; main＆＃34;将调度应用程序进行API调用，进行API调用以及处理结果的函数。
两个纯动作创建器（返回具有类型和任意数量的其他属性的对象的函数），它们将与API调用相关的信息传递给reducers。

行动：

/* 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操作时最重要的考虑因素是什么？

3 个答案: