javascript - Fetching data from async api call using react redux -

i'm having problem api call in react redux project. here's code snippet project.

poiaction.js

export function poisuccess(pois) {   // log detail 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);     }) } 

console log output:

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:     // console log output same poiaction     console.log("reducer: ", action.pois);     return [action.pois, ...state];     break;      default:       return state;   } } 

the console log output same poiaction

root reducer

const rootreducer = combinereducers({   loginreducer,   poireducer }); 

the component display list api call:

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

here this.props.pois undefined , value of state mapstatetoprops is:

what missing? how access list that's returning api call ?

thanks

when combine reducers, this

const rootreducer = combinereducers({   loginreducer,   poireducer }); 

which means

const rootreducer = combinereducers({   loginreducer : loginreducer,   poireducer : loginreducer }); 

and that's not want.

it should

const rootreducer = combinereducers({   loginreducer : loginreducer,   poireducer : loginreducer }); 

also, reason, got rootreducer inside root reducer, little weird.

so way access poireducer be

function mapstatetoprops(state) {   console.log("state: ", state);   return {     pois: state.rootreducer.poireducer   }; }