如何在react应用程序中设置redux存储？

Question

我不能在我的应用程序中设置redux存储。我在控制台中没有收到任何错误。当我使用redux dev工具时，它告诉我没有检测到存储。我做错了什么？我需要更改我的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);

Answer 1

存储应该可以使用您所做的更改，但是要激活扩展，还需要一个额外的步骤

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

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

Answer 2

 const initialState = {
 district: ''
};    

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

你能检查一下这个吗。它现在起作用了