What might be the problem with this Redux (react) App?

Question

I am having trouble with my code, but I can't seem to figure out what's wrong.

I am trying to make a project on a single App component, to get a better understanding, but I can't get the heroes state.

I'd like to get a better understanding of Redux, and after this project, I'll separate the files, but I found it easier to just use one app to start.

My Code

import React from 'react';
import './App.css';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import PropTypes from 'prop-types';

const initialState = {
  heroes: [
    {id: 1, name: 'Superman'},
    {id: 2, name: 'Batman'},
    {id: 3, name: 'Robin'},
    {id: 4, name: 'Spiderman'},
    {id: 5, name: 'Thor'}
  ]
}
const GET_HEROES = 'GET_HEROES';

const getHeroes = () => {
  return {
    type: GET_HEROES,
    text: 'Getting all the heroes'
  }
}

const heroReducer = function(state = initialState, action) {
  switch(action.type) {
    case GET_HEROES:
      console.log(state);
      return { ...state }
    default:
      console.log(state);
      return state
  }
}
const rootReducer = combineReducers ({
  hero: heroReducer
});

const store = createStore(rootReducer, initialState, applyMiddleware(thunk));

class App extends React.Component {



  componentDidMount() {
    getHeroes();
  }

  render() {
    return (
      <Provider store={store}>
        <h1>Hello world</h1>
        <ul>
          {[1,2,3].map(item => (
            <li>{item}</li>
          ))}
        </ul>
      </Provider>
    );
  };
}

App.propTypes = {
  getHeroes: PropTypes.func.isRequired,
  hero: PropTypes.object.isRequired
}

export default (App);

Answer 1

The application cannot get state of heroes because it doesn't connect to redux. You could use 'connect' function to make connection between app and redux middleware. You also need to add mapStatetoProps() & mapDispatchtoProps() in connect functions.

• mapStatetoProps(), in order to connect App commponent with redux.
• mapDispatchProps(), in order to dispatch action redux on App componnent.

The code should be like this:

index.js

import React from 'react';
import App from './App.js';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import PropTypes from 'prop-types';

const initialState = {
  heroes: [
    {id: 1, name: 'Superman'},
    {id: 2, name: 'Batman'},
    {id: 3, name: 'Robin'},
    {id: 4, name: 'Spiderman'},
    {id: 5, name: 'Thor'}
  ]
}
const GET_HEROES = 'GET_HEROES';

const getHeroes = () => {
  return {
    type: GET_HEROES,
    text: 'Getting all the heroes'
  }
}

const heroReducer = function(state = initialState, action) {
  switch(action.type) {
    case GET_HEROES:
      console.log(state);
      return { ...state }
    default:
      console.log(state);
      return state
  }
}
const rootReducer = combineReducers ({
  hero: heroReducer
});

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

const app = (
  <Provider store={store}>
      <App />
  </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

app.js

import React from 'react';
import './App.css';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

class App extends React.Component {
  componentDidMount() {
    this.props.ongetHeroes();
  }

  render() {
    return (
      <h1>Hello world</h1>
        <ul>
        {[1,2,3].map(item => (
          <li>{item}</li>
        ))}
      </ul>
    );
  };
}

App.propTypes = {
  getHeroes: PropTypes.func.isRequired,
  hero: PropTypes.object.isRequired
}

const mapStateToProps = (state) => {
  return {
    heroes: state.hero.heroes
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    ongetHeroes : () => dispatch(getHeroes()),
  };
};

export default connect(mapStatetoProps, mapDispatchtoProps)(App);

Answer 2

Take a look at connect ...

Example usage for your code:

const mapDispatchToProps = {
    getHeros: getHeros
};

const mapStateToProps = state => {
    return {
        heros: state.heros
    }
}

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