首页 文章

使用redux-promise和axios时，Reducer返回undefined

提问于
浏览 次
3

我试图在promise解析后调用一个回调（使用.then）事实证明这给了我的const request 某种不同的承诺，reducer返回为undefined：

行动：

export function lookup(company, callback) {
      const id = company.textfield;
      const url = `${ROOT_URL}${id}`;

      const request = axios.get(url)
       .then(() => callback())

      return {
        type: LOOK_UP,
        payload: request,
        meta: id
     };
 }

减速器：

import { LOOK_UP } from '../actions/index';

export default function(state = {}, action) {
    switch (action.type) {
        case LOOK_UP:
            const data = action.payload.data;
            const id = action.meta;

            if (data.Success === true) {
                return { ...state, [id]: data.CompanyInformation };
            } else {
                return state;
            }
    }
    return state;
}

正如您所看到的，我将来自axios的API的数据传递给我的reducer . 在此之后我设置状态，我需要调用'actions'中的回调（它在组件内创建另一个动作调用） . 不幸的是，我得到的错误是在reducer const data = action.payload.data 中未定义 .

当我不使用这个回调时，一切正常，但是我只能在这个reducer返回新状态后调用该回调 .

javascript promise redux axios redux-promise

2 回答

  • 0

    request 等于整个陈述：

    const request = axios.get(url)
   .then(() => callback())

    因此，如果 callback() 没有返回某些内容，那么承诺将无法解决 . 我假设您正在使用此调用获取一些数据，因此您需要传递该数据，否则您的reducer将永远不会获得它 . 像这样：

    const request = axios.get(url)
   .then((dataFromRequest) => { 
     callback(); 
     return dataFromRequest; 
});

    或者您可以将两者分开并写下以下内容：

    const request = axios.get(url);
request.then(() => callback());

return {
    type: LOOK_UP,
    payload: request,
    meta: id
 };

    比较下面代码段中的承诺：

    const promisedData = () => Promise.resolve(42);

promisedData()
  .then(data => console.log('Resolved data is ', data));


const promisedTrasformedData = () => 
   Promise.resolve(700)
   .then(data => data - 34);
   
   
promisedTrasformedData()
  .then(transformedData => console.log('Transformed data is ', transformedData));
  
  

const promisedAndLostData = () => 
  Promise.resolve(42)
 .then(data => returnNoting())

function returnNoting() { };

promisedAndLostData()
 .then(lostData => console.log('Lost data: ', lostData))
    回复于
  • 2

    在行动中使用另一个回调的最佳方法是将中间件“redux-promise”替换为“redux-thunk”

    import ReduxThunk from 'redux-thunk'
const store = createStore(applyMiddleware(ReduxThunk));

    行动：

    export function lookup(company, callback) {
  const id = company.textfield;
  const url = `${ROOT_URL}${id}`;


  return function(dispatch) { 
        axios.get(url)
       .then((res) => {
            dispatch({ type: LOOK_UP, payload: res,  meta: id });
            callback();
         )
      };
 }

    减速器：

    import { LOOK_UP } from '../actions/index';

export default function(state = {}, action) {
    switch (action.type) {
        case LOOK_UP:
            const data = action.payload.data;
            const id = action.meta;

            if (data.Success === true) {
                return { ...state, [id]: data.CompanyInformation };
            } else {
                return state;
            }
    }
    return state;

    }

    回复于

相关问题