Search code examples
reactjsreduxreact-props

I'm new to redux and I can't get the data from the mapStatetoProps function


I have a diches.js that contains a list of data that I wish to use in the maincomponent.js I wrote this reducer.js to receive the lists of data

import { DISHES } from '../shared/dishes'; // deux l'un pour sortir de ce fichier et l'autre pour sortir de ce dossier
import { COMMENTS } from '../shared/comments';
import { PROMOTIONS } from '../shared/promotion';
import { LEADERS } from '../shared/leaders';

export const initialState ={
    dishes: DISHES,
    comments : COMMENTS,
    promotions :PROMOTIONS,
    leaders: LEADERS

};

export const Reducer = (state = initialState, action) =>{
return state;
};

and then this store in the configure.js :

import {createStore} from 'redux';
import {Reducer , initialState} from './reducer';
export const ConfigureStore = ()=>{
    const store = createStore(
      Reducer,
      initialState
    );
    return store; 
}

and this is my app.js:

import React, { Component } from 'react';
import MainComponent from './components/MainComponent';
import './App.css';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConfigureStore } from './redux/configureStore';
const store = ConfigureStore();

class App extends Component {


  render(){
    return (
    <Provider store={store}>
      <BrowserRouter>
    
           <MainComponent />
        
      </BrowserRouter>
    </Provider>
    );
  }
}

  export default App;

and the main component where I want to use these data and console log the data that I should receive:

import React, { Component } from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => {
  console.log("helloooo  "+state.diches);
  return {
    dishes: state.diches,
    comments: state.comments,
    promotions: state.promotions,
    leaders: state.leaders
  }
}

class MainComponent extends Component {

  render(){
    
    return (
      <div> hey</div>
  
        
    );
  }
}

  export default connect(mapStateToProps)(MainComponent);

Solution

  • the problem is in the configuration parameters. it shouldn't have an initiale state as parameter