Can't display data using combine reducer REACT

Question

without redux it works so that not a api connection problem

I have an express app connected to react with proxy I have already managed to display my data in react but now i want to make that in redux soo:

There is my problem, i have maked all the reducers/action, store and combine reducer but I didn't see any datas in my page and i haven't any errors

There is my code :

Action

export const api = ext => `http://localhost:8080/${ext}`;

//
// ─── ACTION TYPES ───────────────────────────────────────────────────────────────
//

export const GET_ADVERTS = "GET_ADVERTS";
export const GET_ADVERT = "GET_ADVERT";

//
// ─── ACTION CREATORS ────────────────────────────────────────────────────────────
//

export function getAdverts() {
  return dispatch => {
    fetch("adverts")
      .then(res => res.json())
      .then(payload => {
        dispatch({ type: GET_ADVERTS, payload });
      });
  };
}

export function getAdvert(id) {
  return dispatch => {
    fetch(`adverts/${id}`)
      .then(res => res.json())
      .then(payload => {
        dispatch({ type: GET_ADVERT, payload });
      });
  };
}

reducer

import { combineReducers } from "redux";
import { GET_ADVERTS, GET_ADVERT } from "../actions/actions";
const INITIAL_STATE = {
  adverts: [],
  advert: {}
};

function todos(state = INITIAL_STATE, action) {
  switch (action.type) {
    case GET_ADVERTS:
      return { ...state, adverts: action.payload };
    case GET_ADVERT:
      return { advert: action.payload };
    default:
      return state;
  }
}

const todoApp = combineReducers({
  todos
});

export default todoApp;

index.js

//imports
const store = createStore(todoApp, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,

  document.getElementById("app")
);

My advertlist page :

//imports..

class Adverts extends Component {


  componentDidMount() {
    this.props.getAdverts();
  }

  render() {
    const { adverts = [] } = this.props;

    return (
      <div>
        <Header />
        <h1>Adverts</h1>
        {adverts.map(advert => (
          <li key={advert._id}>
            <a href={"adverts/" + advert._id}>
              {advert.name} {advert.surname}
            </a>
          </li>
        ))}

        <Footer />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  adverts: state.adverts
});

export default connect(
  mapStateToProps,
  { getAdverts }
)(Adverts);

did you check network calls and make sure fetch call is working — Dinesh undefined, Jun 14 '18 at 09:30
you can put console.logs inside actions, reducers and mapStateToProps and check — Dinesh undefined, Jun 14 '18 at 09:46

score 4 · Accepted Answer · answered Jun 14 '18 at 11:07

4

I think your problem is here:

function mapStateToProps(state) {
  return {
    **adverts: state.adverts**
  };
}

It should work if you change state.adverts to state.todos.adverts:

function mapStateToProps(state) {
  return {
    adverts: state.todos.adverts
  };
}

Because your reducer is called todos, and it has state { adverts }, that's why you cannot access adverts even tho they are obtained.

You can check out working version here: https://codesandbox.io/s/olqxm4mkpq

answered Jun 14 '18 at 11:07

Vikky

750
8
16

1

Also, adding to that you don't need combineReducers if you have just one reducer. – Vinod Sobale Jun 14 '18 at 11:13
1

That's true, but he might combine routing inside of it (since he's using react-router) or some new reducers. I guess it's just base for later... – Vikky Jun 14 '18 at 11:15
1

For the combine reducer, it's because i want to use more that 1 reducer in the future :) @VinodSobale – Benjamin Barbé Jun 14 '18 at 11:40
No problem! I'm glad I could help! :) – Vikky Jun 14 '18 at 12:11

score 1 · Answer 2 · edited Aug 27 '20 at 11:24

The problem is, when you just create a store with one reducer without using combine reducer, it is possible to refer it directly in the ContainerS, like this:

const mapStateToProps = state => {
    
    return{
        *name of var*:  state.adverts   /*direct refers to adverts*/
    }
}

But, when it use combined-reducer , it has to refer to an exact reducer that you want to use.like this :

const mapStateToProps = state => {
    
    return{
        *name of var* :  state.todos.adverts   (indirect refers to adverts from combined-reducer todos)
    }
}

Can't display data using combine reducer REACT

2 Answers2