Question

我想在我的动作生成器中添加一个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,
    }
}

和reducer看起来像

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而不是返回的对象

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

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

Answer 1

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

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

来自FSA文件：

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

Answer 2

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

Answer 3

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

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

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

3 个答案: