我是使用React,React Router v4和Redux的新手。在路由组件中使用connect()
函数时,我似乎无法访问我的Redux存储。 this.props
将以下内容记录到我认为是历史对象的控制台:
{match: {…}, location: {…}, history: {…}, staticContext: undefined, myJson: {…}, …}
但是我只能在索引页面上访问我的商店。只是当我导航到另一个页面(例如/聊天)时,我的商店变得无法访问。请在下面找到我的代码:
App.js
export default class App extends Component {
render() {
return (
<Router>
<div className="App">
<Navigation />
<Switch>
<Route exact={true} path='/' component={Identity} />
<Route path='/chat' component={Message} />
<Route render={function() {
return <p>Not found</p>
}} />
</Switch>
</div>
</Router>
);
}
}
Message.js
class Message extends Component {
render() {
console.log(this.props);
return (
<div>
<h1>Chat Screen</h1>
<Inbox />
<hr />
<h2>Message</h2>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
myJson: state.myJson
};
};
export default withRouter(connect(mapStateToProps, null)(Message));
Index.js
ReactDOM.render(
<MuiThemeProvider>
<Provider store={store}>
<App />
</ Provider>
</MuiThemeProvider>,
document.getElementById('root')
);
registerServiceWorker();
Store.JS
export default createStore(
combineReducers({
myJson
}),
{},
applyMiddleware(promise(), thunk, createLogger())
);
非常感谢任何帮助!
答案 0 :(得分:0)
对于其他有这个问题的人来说,@lavish指出我的Redux商店实际上是可以访问的。在访问新路线时,对象的显示方式不同。