0

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?

Kendall
  • 5,065
  • 10
  • 45
  • 70
  • 1
    What do you mean with across pages? Are you reloading the page when you go to the GamePlay component? Are you correctly initializing the redux store state? – krionz Jul 28 '18 at 16:36
  • @krionz yes I am reloading the page and yes i am initialising the redux store state. Do I need to initialise the state on each component or does handle it? – Kendall Jul 28 '18 at 17:22
  • Actually all you have to do is stop reloading the page. – krionz Jul 29 '18 at 13:47

1 Answers1

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.

nebuler
  • 1,515
  • 1
  • 9
  • 8
  • Is there some Router option to not reload the page? I'm using the defaults and what I thought would have happened was that the content would have gotten replaced without having to reload. – Kendall Jul 30 '18 at 01:07
  • @Kendall It most likely has to do with how you are navigating to the `GamePlay` component. My guess is that you are using an href. Try using `Link` instead, which is part of `react-router-dom`. See https://reacttraining.com/react-router/web/api/Link – nebuler Jul 30 '18 at 01:20