首页 文章

React Redux为行动添加额外字段会导致承诺以不同方式返回

提问于
浏览 次
3

我想在我的动作生成器中添加一个isLoading标志，并在我的reducer中重置它 . 最初没有标志，我的代码工作，操作如下所示

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

Good result

如您所见，该对象返回正常，我可以通过action.payload.data.data.results获取我的列表

请注意，我使用redux 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,
    }
}

isLoading added

为什么只是添加另一个导致此问题的变量？

reactjs react-redux redux-promise redux-promise-middleware

3 回答

  • 2

    Redux Promise和Redux Promise Middleware都符合Flux Standard Action (FSA) . 在操作中添加 meta 键并在其中分配键/值对 .

    相关问题/答案：https://stackoverflow.com/a/35362148/4290174

    从FSA文件：

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

    回复于
  • -1

    试试这个 - 它是如何使用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
          });
    }
    回复于
  • -1

    我认为最干净，反应最简单的方法是：

    //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 的东西，这样，你可以在请求状态改变时更新你的组件......上面的代码不是复制/粘贴就绪，它是为了传输这个想法 .

    回复于

相关问题