Reactjs React-Redux为操作添加额外字段导致承诺以不同方式返回

我想在动作生成器中添加一个isLoading标志，并在减速器上重置它。最初没有这个标志，我的代码可以工作，操作如下

export function getList() {
    const FIELD = '/comics'
    let searchUrl = ROOT_URL + FIELD + '?ts=' + TS + '&apikey=' + PUBLIC_KEY + '&hash=' + HASH;
    const request = axios.get(searchUrl)
    return {
        type: FETCH_LIST, 
        payload: request,
    }
}

减速机看起来像

const INITIAL_STATE = { all: [], id: -1, isLoading: false };

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case FETCH_COMIC_LIST: 
            console.log('reducer action =', action, 'state =', state)
            return {
                ...state, 
                all: action.payload.data.data.results,
                isLoading: false
            }
        default:
            return state;
    }
}

如您所见，对象返回良好，我可以通过action.payload.data.data.results获得我的列表

请注意，我使用redux promise作为中间件来处理该承诺

一旦我将我的操作更改为以下内容并重新运行代码，我就会将我的负载（如下图所示）作为承诺，而不是返回的对象

export function getComicList() {
    const FIELD = '/comics'
    let searchUrl = ROOT_URL + FIELD + '?ts=' + TS + '&apikey=' + PUBLIC_KEY + '&hash=' + HASH;
    const request = axios.get(searchUrl)
    return {
        type: FETCH_COMIC_LIST, 
        isLoading: true, 
        payload: request,
    }
}

---

为什么简单地添加另一个变量会导致这个问题？？？

试试这个——它是如何使用redux thunk完成的——所以我希望它与redux promise中间件类似。还可以查看从以下位置返回的内容：

all:action.payload

在减速器中

    export function getList() {
        const FIELD = '/comics'
        let searchUrl = ROOT_URL + FIELD + '?ts=' + TS + '&apikey=' + PUBLIC_KEY + '&hash=' + HASH;

        // return a promise that the middleware should handle
        // return response or error from promise
        return axios.get(url)
          .then((response) => {
            type: FETCH_LIST,
            isLoading: true, 
            payload: response
          }).error((response) => {
            //handle error
          });
    }

---

我认为最干净、反应最快的redux方式是：

//types:
const FETCH_LIST_START = "…";
const FETCH_LIST_SUCCESS = "…";
const FETCH_LIST_ERROR = "…";

//action
const loadList = url => dispatch => {
  dispatch({type: FETCH_LIST_START });

  fetch(url)
    .then(res => {
      if (res.status !== 200) throw new Error('load failed');
      dispatch({ 
        type: FETCH_LIST_SUCCESS,
        payload : { res } }
      })

    )
    .catch(err => dispatch({ 
      type: FETCH_LIST_ERROR, 
      payload: { error } })
    );
};

//REDUCER
case: FETCH_LIST_START:
  return Object.assign({}, state, { isLoading: true });
  break;
case: FETCH_LIST_SUCCESS:
  return Object.assign({}, state, { 
     isLoading: false, 
     data: action.payload.res
  });
  break;
case FETCH_LIST_ERROR:
  …
  break;

---

因此，假设您正在使用redux thunk。基本思想是让您的reducer处理该状态，包括设置

isLoading

东西，这样，您可以在请求状态更改时更新组件……上面的代码没有准备好复制/粘贴，它是为了传输该思想。

Redux Promise和Redux Promise中间件都符合。向操作添加

meta

键，并在其中分配键/值对

相关问题/答案：

根据FSA文件：

可选的元属性可以是任何类型的值。它用于不属于有效载荷的任何额外信息

---

你能说出你使用的确切承诺吗？redux承诺几个问题…1。这是使用redux thunk中间件，对吗？2.你知道为什么我的原始代码在添加isLoading时会出错吗？在问题的上下文中（使用Redux Promise中间件），这是不正确的。要解决这个问题，只需使用

meta

字段，如正确答案中所述：这是不正确的。要解决这个问题，只需使用

meta

字段，如正确答案中所述：如果Redux给你一个警告或一些不应该在响应中添加的内容，那将很好，因为我永远不会知道其他情况。你是对的，这将是解决这个问题的一个很好的方法，因为我注意到人们被它绊倒了。然而，

meta

字段不是Redux需求，而是Redux中间件可以选择遵循的标准。也许可以说是中间件所需要考虑的问题。