reactjs - React Redux 添加额外字段以执行操作导致承诺返回不同

Question

我想在我的动作生成器中添加一个 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 作为我的中间件来处理 Promise。

一旦我将操作更改为以下并重新运行代码，我就会将我的有效负载（如下图所示）作为 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,
    }
}

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

score 4 · Accepted Answer

Redux Promise and Redux Promise Middleware are both compliant with Flux Standard Action (FSA). Add a meta key to the action and assign your key/value pairs within it.

Related question/answer: https://stackoverflow.com/a/35362148/4290174

From the FSA documentation:

The optional meta property MAY be any type of value. It is intended for any extra information that is not part of the payload.

score -1 · Accepted Answer

试试这个——它是如何使用 redux-thunk 完成的——所以我希望它类似于 redux-promise-middleware。另请参阅从以下内容返回的内容：

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
          });
    }

score -1 · Accepted Answer

我认为最干净和最react-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事物，这样，你可以在请求状态改变时更新你的组件……上面的代码不是复制/粘贴准备好的，它是为了传递思想。

reactjs - React Redux 添加额外字段以执行操作导致承诺返回不同

3 回答 3

Related

Reference