React redux display data from async action

Question

I am building a react app and implementing redux for data. When I navigate to a particular route, I want to dispatch the action to fetch the data from an external API and then once the data comes back, display the data for the user.

Store :

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';

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

const initialState = {
  marvel :{
    characters: []
  }
};

const store = createStore(rootReducer, initialState, applyMiddleware(thunkMiddleware, createLogger()));

export const history = syncHistoryWithStore(browserHistory, store);

if (module.hot) {
  module.hot.accept('../reducers/', () => {
    const nextRootReducer = require('../reducers/index').default;
    store.replaceReducer(nextRootReducer);
  });
}

export default store;

reducer :

import * as constants from '../constants/constants';

const initialState = {
  characters: [],
  isFetching: false,
  errorMessage: null
};

const marvelReducer = (state = initialState, action) => {
  switch (action.type) {
    case constants.FETCH_MARVEL : 
      return Object.assign({},state,{isFetching: true});
    case constants.FETCH_MARVEL_SUCCESS :
      return Object.assign({}. state,{
        characters: [...action.response],
        isFetching: false
      });
    case constants.FETCH_MARVEL_ERROR :
      return Object.assign({}, state,{
        isFetching: false,
        errorMessage: action.message
      });
    default :
      return state;
  }
};

export default marvelReducer;

actions:

import 'whatwg-fetch';

import * as constants from '../constants/constants';


export const fetchMarvel = (dispatch) => {
  const MARVEL_API = 'http://gateway.marvel.com:80/v1/public/characters?apikey=e542b1d89f93ed41b132eda89b9efb2c';

  dispatch({
    type: constants.FETCH_MARVEL
  });

  return fetch(MARVEL_API).then(
    response => {
      dispatch({
        type: constants.FETCH_MARVEL_SUCCESS,
        response
      });
    },
    error => {
      dispatch({
        type: constants.FETCH_MARVEL_ERROR,
        message: error.message || 'Something went wrong with fetchMarvel'
      });
    });
};

component :

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from '../actions/actions';
import '../styles/homeStyles.css';

class Home extends Component {
  render() {
    const { characters, isFetching, errorMessage } = this.props;
    return (
      <div>
        <h1>React Starter App</h1>
        <h2>This is the home page</h2>
      </div> 
    );
  }
}

function mapStateToProps(state) {
  return {
    characters: state.characters,
    isFetching: state.isFetching,
    errorMessage: state.errorMessage
  };
}

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

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

I know I'm not currently displaying the props anywhere in the application, but first I am just trying to get them populated. What step am I missing to dispatch the action so that I can populate the props from state?

Dan Abramov · Accepted Answer · 2016-06-27 15:00:04Z

3

You are not dispatching the action anywhere. So nothing happens.
You probably want to do this in a React lifecycle hook, for example:

class Home extends Component {
  componentDidMount() {
    this.props.actions.fetchMarvel();
  }

  render() {
    const { characters, isFetching, errorMessage } = this.props;
    return (
      <div>
        <h1>React Starter App</h1>
        <h2>This is the home page</h2>
      </div> 
    );
  }
}

answered Jun 27, 2016 at 15:00

Dan Abramov

269k87 gold badges417 silver badges523 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

erichardson30 Over a year ago

Yeah I just wasn't sure where the correct place to do that from was. And when I add that in, I get actions.js?d255:9Uncaught TypeError: dispatch is not a function thrown

Dan Abramov Over a year ago

fetchMarvel signature should be fetchMarvel() { return dispatch => ... }, not fetchMarvel(dispatch). Please see github.com/gaearon/redux-thunk documenation.

Collectives™ on Stack Overflow

React redux display data from async action

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related