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

Question

I have the following react structure

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

There is a child in the StartPage component that interacts with a property in the store state

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

The component works as expected as the this.props.bottle is set on the click event. However,

When I navigate to the GamePlay component which has

....

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

Does redux work with components across pages? Do I need to use a localStorage to help redux persist through routes?

How can I pass the state as an updated property of the component via the Route/ Switch components?

Answer 1

You are probably reloading the page. Redux's state is stored in memory, and so when you refresh the page it is lost; see this . You can use something like redux-persist to store your app's state in local storage, etc.