时间戳

首页 > 解决方案 > reactRedux 全局状态变化

reactjs - reactRedux 全局状态变化

问题描述

好的，我正在尝试创建一个全局状态。

父对象在哪里发生变化，孩子们会知道变化。

现在我正在重新加载我不喜欢的页面。

在我的APP我有

 state = {
        userIsLogged: true
    }

然后我在下面有以下代码

                  <Switch>
                    <Route path="/" exact>
                        <Home />
                    </Route>
                    <Route path="/info">
                        <Info />
                    </Route>
                    <Route path="/search">
                        <Search />
                    </Route>
                    <Route path="/login">
                        <Login />
                    </Route>
                    <Route path="/favorit">
                        <Favorit />
                    </Route>
                    <Route path="/chapter">
                        <Chapter />
                    </Route>
                </Switch>

现在何时userIsLogged更改，我想重新渲染当前页面，例如收藏夹或搜索等。

我已经锁定了商店，但我很难理解它。

任何人都喜欢简单地解释它，或者有没有其他方法可以做到。

标签： reactjsreact-redux

解决方案

你可以这样做：

const App = (props) => {

  let routes = (
    <Switch>
      <Route path="/search" component={Search} />
      <Route path="/" component={Home} />
    </Switch>
  );
  if (props.isAuth) {
    routes = (
      <Switch>
        <Route path="/favourite" component={Favourite} />
        <Route path="/search" component={Search} />
        <Route path="/" component={Home} />
      </Switch>
    );
  }
  return routes;
}

const mapStateToProps = state => ({
  isAuth: state.userIsLogged
})

export default connect(mapStateToProps)(App);

因此，每当userIsLogged发生更改时，组件都会重新渲染，因为isAuth道具发生了变化。现在如何使用该道具以及使用哪些组件或路由取决于您。

推荐阅读