使用React Router导航到新路线后如何访问我的Redux商店?

时间:2017-11-02 17:30:36

标签: reactjs redux react-router

我是使用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())
);

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

对于其他有这个问题的人来说,@lavish指出我的Redux商店实际上是可以访问的。在访问新路线时,对象的显示方式不同。