如何解决如何在我的React应用程序中设置Redux存储?
我无法在应用程序中设置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);
解决方法
const initialState = {
district: ''
};
const reducer=(state = initialState,action)=>{
switch (action.type){
case 'CHANGE_DISTRICT':
return {...state,district: action.district}
default:
return state;
}
return state;
}
您能检查一下吗?现在可以使用
,商店应该使用您所做的更改,但是要激活扩展,还需要执行其他步骤
.gitignore
https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。