CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Flynnpc
Flynnpc

Reputation: 331

How do I set up a redux store in my react application?

I cannot set up a redux store in my application. I am not receiving any errors in the console. When I use the redux dev tools it says that there is no store detected. What am I doing wrong? Do I need to change my mapStateToProps function? It doesn't appear to be the case in the tutorials I have followed so far. My files look like the following:

index.js

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from 'redux';
import {Provider} from 'react-redux';
import { reducer } from './reducer';
import App from './App';



const store = createStore(reducer)

ReactDOM.render(
  <Provider store={store}>
    < App / >
  </Provider>,
  document.getElementById("root")
);

module.hot.accept(reducer);

export default store

App.js

import React from 'react';
import { createStore } from 'redux';
import { connect, Provider } from 'react-redux';
import Map from './map/Map';

// const initialState = {
//   district: ''
// };

const action = {
  type: 'CHANGE_DISTRICT',
  district: 'Congressional District 17'
}

// const reducer = (state = initialState, action) =>{
//   switch (action.type){
//     case 'CHANGE_DISTRICT':
//       return {...state, district: action.district}
//       default:
//         return state;
//   }
//   return state;
// }

// const store = createStore(reducer);

class App extends React.Component {
  render() {
    return (
      // <Provider store={store}>
        <Map / >
      // </Provider>
    )
  }
}

export default App;

reducer.js

export const initialState = {
  district: ''
};

export const reducer = (state = initialState, action) =>{
  switch (action.type){
    case 'CHANGE_DISTRICT':
      return {...state, district: action.district}
      default:
        return state;
  }
  return state;
}

Map.js

import React from 'react';
import L from 'leaflet';
import { connect } from 'react-redux';

const mapStateToProps = state => {
  return {
    district: state.district
  };
}

class Map extends React.Component {

  componentDidMount() {
    // create map
    this.map = L.map('map').setView([31.15, -99.90], 6);
    L.tileLayer('https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?', {
      attribution: 'Pioneer Basemap by Thunderforest, a project by Gravitystorm Limited.'
    }).addTo(this.map);
  }
  render() {
    const mapStyle = {
      height: '500px',
      width: '100%'
    }

    return <div id = "map" style={mapStyle}> < /div>
  }
}


export default connect(mapStateToProps)(Map);

Upvotes: 0

Views: 382

Answers (2)

Damien
Damien

Reputation: 633

The store should work with the changes you made but to activate the extension there is an additional step

 const store = createStore(
   reducer,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux

Upvotes: 1

Pavan Kalyan
Pavan Kalyan

Reputation: 407

 const initialState = {
 district: ''
};    

const reducer=(state = initialState, action)=>{
 switch (action.type){
case 'CHANGE_DISTRICT':
  return {...state, district: action.district}
  default:
    return state;
 }
 return state;
}

can you check this. it works now

Upvotes: 0

Related Questions