使用react redux从异步API调用获取数据

我遇到了在我的React Redux项目中发生的api调用问题。这是项目的代码片段。使用react redux从异步API调用获取数据

poiAction.js

export function poiSuccess(pois) { 
    // The log detail is below 
    console.log("POI: ", pois); 
    return { 
     pois, 
     type: POI_FETCH_SUCCESS 
    }; 
} 
export function poiFetch(pois) { 
    return { 
    pois, 
    type: POI_FETCH_ATTEMPT 
    }; 
} 

export function fetchPoi(token) { 
    return dispatch => 
    axios({ 
     method: 'get', 
     url: 'http://localhost:9090/poi', 
     headers: { 
     'x-access-token': token 
     }, 
    }) 
    .then((pois) =>{ 
     // let poi = pois.data[0]; 
     // console.log("POIS: ", pois.data[0]); 
     dispatch(poiSuccess(pois)); 
    }) 
    .catch((error) => { 
     throw(error); 
    }) 
}

控制台日志输出：

poiReducer.js

export default function poi(state = [], action){ 
    switch(action.type){ 
    case POI_FETCH_ATTEMPT: 
    return state; 
    case POI_FETCH_FAILED: 
    return state; 
    case POI_FETCH_SUCCESS: 
    // The console log output is same as poiAction 
    console.log("Reducer: ", action.pois); 
    return [action.pois, ...state]; 
    break; 

    default: 
     return state; 
    } 
}

控制台日志输出是相同poiAction

根异径

const rootReducer = combineReducers({ 
    LoginReducer, 
    PoiReducer 
});

显示从API调用列表中的成分：

Dashboard.js

class Dashboard extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     poi: '', 
     token: null 
    }; 
    } 
    componentWillMount() { 
    let token = sessionStorage.getItem("token"); 
    this.setState({token}); 
    this.props.actions.fetchPoi(token); 
    } 
    render() { 
    console.log("POIS: ", this.props.pois); 
    return (
     <div> 
     <h1>Dashboard</h1> 

     </div> 
    ); 
    } 
} 

Dashboard.propTypes = { 
    pois: PropTypes.array.isRequired, 
    actions: PropTypes.object.isRequired, 

}; 

function mapStateToProps(state) { 
    console.log("State: ", state); 
    return { 
    pois: state.poiReducer 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(poiAction, dispatch) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

这里this.props.pois是undefined和state从mapStateToProps值：

我缺少什么？我如何访问从api调用返回的列表？

感谢

来源

2016-07-28 Tushar Khatiwada

至于我，你必须返回 - >'功能（调度）{axios.get（），然后（//派遣）}'，而不是'return dispatch（）...'。请看看[this]（https://github.com/oviava/react-redux-axios-example/blob/master/src/actions/actions.js）example –

@TheReason我正在使用'thunk'和'redux-promise'作为中间件。 –

当你把你的减速，你这样做

const rootReducer = combineReducers({ 
    LoginReducer, 
    PoiReducer 
});

这意味着

const rootReducer = combineReducers({ 
    LoginReducer : LoginReducer, 
    PoiReducer : LoginReducer 
});

而这不是你想要的。

应该

const rootReducer = combineReducers({ 
    loginReducer : LoginReducer, 
    poiReducer : LoginReducer 
});

而且，出于某种原因，你有你的根减速，这是一个有点怪异内rootReducer。

所以要访问poiReducer途中会有

function mapStateToProps(state) { 
    console.log("State: ", state); 
    return { 
    pois: state.rootReducer.poiReducer 
    }; 
}

来源

2016-07-28 10:07:55 QoP

使用react redux从异步API调用获取数据

回答

相关问题