redux - 如何将数据添加到待处理操作？

Question

我正在使用 Axios、Redux 和 Redux Promise 中间件。

我有以下 Action 创建者:

return {
        type: 'FETCH_USERS',
        payload: axios.get('http://localhost:8080/users',
            {
                params: {
                    page
                }
            }
        )
    }

在我的 FETCH_USERS_PENDING 操作的 reducer 中，我想将请求的 url 保存在我的状态中。我怎样才能做到这一点？

Answer 1

您想使用 redux-promise-middleware 的“元”变量 。像这样:

return {
  type: 'FETCH_USERS',
  meta: { url: 'http://localhost:8080/users' },
  payload: axios.get('http://localhost:8080/users', config)
}

您可以在参数中传递它，但在获取页面之前不会返回。这意味着它不会在 FETCH_USERS_PENDING 期间被传回。

而且我很确定如果您直接包含在返回对象中(就像 Lucas 建议的那样)，它将从 FETCH_USERS_PENDING 阶段中删除。

这是来自 redux-promise-middleware 的 FETCH_USERS_PENDING 阶段:

  /**
   * First, dispatch the pending action. This flux standard action object
   * describes the pending state of a promise and will include any data
   * (for optimistic updates) and/or meta from the original action.
   */
  next({
    type: `${type}_${PENDING}`,
    ...(data !== undefined ? { payload: data } : {}),
    ...(meta !== undefined ? { meta } : {})
  });

正如您在此阶段所见，中间件返回附加的“type”属性并检查“data”和“meta”属性。如果存在，它们将在操作中传递。

如果您想进一步研究，这里是 redux-promise-middleware source code。