Блог

Я не могу настроить хранилище redux в своем приложении. Я не получаю никаких ошибок в консоли. Когда я использую инструменты разработчика redux, он сообщает, что хранилище не обнаружено. Что я делаю не так? Нужно ли мне изменять мою функцию mapStateToProps? Похоже, что в руководствах, которым я следовал до сих пор, это не так. Мои файлы выглядят следующим образом:

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);
  

Хранилище должно работать с внесенными вами изменениями, но для активации расширения требуется дополнительный шаг

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

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

  const initialState = {
 district: ''
};    

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

вы можете это проверить. теперь это работает