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);
the problem is in the configuration parameters. it shouldn't have an initiale state as parameter