javascript - 将状态属性传递给路由中的组件

Question

我有以下 react 结构

<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)

该组件按预期工作，因为在单击事件上设置了 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 ) 未定义

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

如何通过 Route/Switch 组件将状态作为组件的更新属性传递？

Answer 1

您可能正在重新加载页面。 Redux 的状态存储在内存中，因此当您刷新页面时它就会丢失；请参阅this 。您可以使用类似 redux-persist 的内容将应用程序的状态存储在本地存储等中。