React＆Redux-路由更改后状态变空

Question

I'm building a react & redux application and the problem I'm having is that after I do browserHistory.push('/myroute') and being successfully routed, I see that my state has been cleared, and while I need some data that's on the state from the previous route.. I still haven't found out if this is natural or not

My case is that I need to transfer data between routes.. I thought that is what state is for

this is my log:

 action @ 16:21:35.917 ON_ACTIVATE_FINISHED
counter.js:68 Object {counter: Object, registerReducer: Object, routing: Object}
core.js:97  action @ 16:21:35.928 @@router/LOCATION_CHANGE
register.js:9 Object {}
core.js:97  action @ 16:21:38.840 INPUT_PW_CHANGED

routes.js :

// @flow
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './containers/App';
import HomePage from './containers/HomePage';
import CounterPage from './containers/CounterPage';
import RegisterPage from './containers/RegisterPage';


export default (
  <Route path="/" component={App}>
    <IndexRoute component={CounterPage} />
    <Route path="/counter" component={CounterPage} />
    <Route path="/home" component={HomePage} />
    <Route path="/register" component={RegisterPage} />
  </Route>
);

CounterPage.js :

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Counter from '../components/Counter';
import * as CounterActions from '../actions/counter';

function mapStateToProps(state) {
  return {
    counter: state.counter,
    key: state.key
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(CounterActions, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

RegisterPage.js :

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Register from '../components/Register';
import * as RegisterActions from '../actions/register';

function mapStateToProps(state) {
  return {
    pw: state.pw
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(RegisterActions, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Register);

reducers/counter.js :

import { Router, hashHistory } from 'react-router';
export const INPUT_KEY_CHANGED = 'INPUT_KEY_CHANGED';
export const ACTIVATE_KEY = 'ACTIVATE_KEY';
export const ON_ACTIVATE_FINISHED = 'ON_ACTIVATE_FINISHED';

export function onInputChanged(e) {
    return {
        type: INPUT_KEY_CHANGED,
        data: e.target.value
    };
}

export function activate() {
    return {
        type: ACTIVATE_KEY
    };
}

export function onActivateFinished(json) {
    return {
        type: ON_ACTIVATE_FINISHED,
        json
    }
}

const SERVER_ADDRESS = 'http://*******:9001';
export const fetchActivationKey = () => (dispatch, getState) => {
    var request = require('request-promise');

    dispatch(activate())
    const key = getState().counter.key;
    return request(`${SERVER_ADDRESS}/invite/${key}`)
        .then((fHost) => {
            return request(`http://${fHost}:9000/api/start/${key}`)
        })
        .then(json => {
            dispatch(onActivateFinished(json))
            let currentState = getState();
            if (currentState.counter.model.status === 0) {
                hashHistory.push('/register');
            }
        });
}

Any ideas?

Answer 1

Based on https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store and on my own app, it should look like this:

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <Route path="foo" component={Foo}/>
        <Route path="bar" component={Bar}/>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root')
)

But I don't see the Provider and the Router in your code, the Provider is here to pass the main state to all components and without it I'm not sure it would work properly.

Normally, you can't use connect() without wrapping the root component in Provider .

Answer 2

Let's have a try at this.

Take this code

.then(json => {
  dispatch(onActivateFinished(json))
  let currentState = getState();
  if (currentState.counter.model.status === 0) {
    hashHistory.push('/register');
  }
});

and change it to this:

.then(json => {
  dispatch(onActivateFinished(json))
  let currentState = getState();
  this.setState({counter: currentState.counter});
  if (currentState.counter.model.status === 0) {
    hashHistory.push('/register');
  }
});

I'm still learning React and by no means am any kind of expert. So I am not 100% certain this will work. But it is an effort to assist based off of what I currently know.