Data not appearing in component when hooking up action creators, reducers with redux-thunk

Question

I'm having problems putting all the pieces together so as to be able to display the data on my component. I can see the data display on the chrome console, and I don't get any errors on the page, but the data does not appear on my component.

Below is a snippet with the code.

actionCreator

// @flow
// [TODO]: Add flow

import axios from 'axios';

const ROOT_URL = `https://toilets.freska.io/toilets`;

// const Actions = /* [TODO]: add flow */

export const FETCH_TOILETS = 'FETCH_TOILETS';
export const FETCH_TOILETS_PENDING = 'FETCH_TOILETS_PENDING';
export const FETCH_TOILETS_ERROR = 'FETCH_TOILETS_ERROR';

export function fetchToilets() {
    const url = `${ROOT_URL}`;  
    const request = axios.get(url);

    return dispatch => {
    console.log(`IN ACTION fetchToilets`);

    dispatch({ type: FETCH_TOILETS_PENDING })
    axios.get(url)
    .then(
      response => dispatch({
        type: FETCH_TOILETS,
        payload: response
    }),
      error => dispatch({ type: FETCH_TOILETS_ERROR, payload: error })
    );
    };
};

reducer_cardList & rootReducer

// @flow
// [TODO]: Add flow

import { FETCH_TOILETS } from '../actions';

// type State = {} /* [TODO]: add @flow */

const initialState = [];

const CardListReducer = (state: State = initialState, action:Action ): State => {
    switch(action.type) {
        case FETCH_TOILETS:
            return [  ...state, action.payload.data ];
        default:
            state;
    }
    return state;
}

export default CardListReducer;


// rootReducer

// @flow
// [TODO]: Add flow
import { combineReducers } from 'redux';
import CardListReducer from './reducer_cardList';

const rootReducer = combineReducers({
  toilets: CardListReducer
});

export default rootReducer;

index.js

// @flow
// [TODO]: add @flow

import * as React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware, compose } from 'redux';

import App from './App';
import rootReducer from './reducers';

import './index.css';

import registerServiceWorker from './registerServiceWorker';

const rootElement = document.getElementById('root');

const configueStore = createStore(
    rootReducer,
    applyMiddleware(thunk)
);

ReactDOM.render(
  <Provider store={configueStore}>
    <App />
  </Provider>
  ,
  rootElement
);

registerServiceWorker();

CardList.js

/* @flow */
// [TODO]: add flow

import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchToilets } from '../../actions';


import CardItem from '../../components/CardItem/CardItem';
import './CardList.css';


type CardListProps = {
  cards?: React.Node<any>
}

class CardList extends React.Component<CardListProps,{}> {

  renderToilet() {
    const toilets = this.props.toilets;
    //const toilet = toilets.map(e => e.id)

    console.log(`These are all the toilets: ${JSON.stringify(toilets)}`); // [[{"id":1,"map_id":"TOILET1","queue_time":1800,"queue_level":1,"type":"male","location":""}, ...etc
    //console.log(`This is the toilet info: ${JSON.stringify(toilet)}`);

    const id = toilets.map(toilet => toilet.id);
    const mapId = toilets.map(toilet => toilet.map_id);

    console.log(`This is the id: ${JSON.stringify(id)} and the mapId: ${JSON.stringify(mapId)}`); // This is the id: [null] and the mapId: [null]

    // const queueTime = data.map(toilet => toilet.queue_time);
    // const queueLevel = data.map(toilet => toilet.queue_level);
    // const type = data.map(toilet => toilet.type);
    // const location = data.map(toilet => toilet.location);

    return (
      <li key={id}> 
       <p>{mapId}</p>
       {/*<p>{queueTime}</p>
       <p>{queueLevel}</p>
       <p>{type}</p>
       <p>{location}</p> */}
      </li>
    )
  }

  componentDidMount() {
    console.log(`fetchToilets() actionCreator: ${this.props.fetchToilets()}`);
    this.props.fetchToilets();
  }


  render() {
        return(
      <section>      
            <ul className='card-list'>
          {/* { this.props.toilet.map(this.renderToilet) } */}
          { this.renderToilet() } 
            </ul>
      </section>
        )
    }
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ fetchToilets }, dispatch);
}

const mapStateToProps = ({ toilets }) => {
  return { toilets }
};

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

Answer 1

You need to update your reducer like

const CardListReducer = (state: State = initialState, action:Action ): State => {
    switch(action.type) {
        case FETCH_TOILETS:
            return [  ...state, ...action.payload.data ];
        default:
            state;
    }
    return state;
}

your old line

return [  ...state, action.payload.data ]

replace with

 return [  ...state, ...action.payload.data ];

if you want to load on every time then you can just simple

    return  action.payload.data;

and Your render function

renderToilet() {
    const toilets = this.props.toilets;   

  return arr.map((item, id) =><li key={id}> 
       <p>{item.id}</p>
       {/*<p>{queueTime}</p>
       <p>{queueLevel}</p>
       <p>{type}</p>
       <p>{location}</p> */}
      </li>)


  }