Question

我有以下反应结构

<Provider store={ store }>
              <Router>
                <Switch>
                  <Route path="/how-to" component={ Help } />
                  <Route path="/start" component={ StartPage } />
                  <Route path="/game" component={ GamePlay } />
                  <Route exact path="/" component={ Home } />
                </Switch>
              </Router>
        </Provider>

StartPage组件中有一个孩子，该孩子与处于存储状态的属性进行交互

    .....
// pickBottle is an action from the store for the state
    <div className="text-center">
                        <button alt={bottleData.name} onClick={ (e) => { self.props.pickBottle(bottleData) } }>{bottleData.name}</button>
                      </div>
    ...

    export default connect(state => ({ bottle: state }), { pickBottle } )(PickerSlides)

由于在click事件上设置了this.props.bottle，因此该组件可以正常工作。但是，

当我导航到具有以下内容的GamePlay组件时

....

  render() {
    const { store } = this.context;
    console.log(store);

    return (

      <div id="game" className="panel" >
          <section className="row flexbox">
            <header>
              <hgroup>
                <h2 id="tries" className="tries">Tries: <span>{ this.state.tries }</span></h2>
                <h3 className="bottles">Opened:<span id="score" className="opened">{ this.state.bottlesOpened }</span></h3>
              </hgroup>
            </header>
            <article className="row flexbox">

            </article>
            </section>
      </div>
    );
  }
}
// map state to props

const mapStateToProps = ( state ) => {
  console.log('map state ', state );
    return {
        bottle: state,
    }
}

export default connect(mapStateToProps)(GamePlay)

console.log('map state', state )未定义

redux是否可以跨页面使用组件？我需要使用localStorage来帮助Redux通过路由持久化吗？

如何通过路由/交换组件将状态作为组件的更新属性传递？

Answer 1

您可能正在重新加载页面。 Redux的状态存储在内存中，因此刷新页面时，它会丢失；参见this。您可以使用redux-persist之类的东西将应用的状态存储在本地存储中，等等。

将状态道具传递到路线中的组件

1 个答案: