[英]How do I set up a redux store in my react application?
I cannot set up a redux store in my application.我无法在我的应用程序中设置 redux 商店。 I am not receiving any errors in the console.我在控制台中没有收到任何错误。 When I use the redux dev tools it says that there is no store detected.当我使用 redux 开发工具时,它说没有检测到存储。 What am I doing wrong?我究竟做错了什么? Do I need to change my mapStateToProps function?我需要更改我的 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 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应用程序.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减速器.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 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;
}
can you check this.你能检查一下吗? it works now现在可以了
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 https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.