javascript - React & Redux - 路由改变后状态变空

Question

我正在构建一个 react & redux 应用程序，我遇到的问题是在我做 browserHistory.push('/myroute') 之后并成功路由，我看到我的状态已被清除，虽然我需要一些来自上一个路由的状态的数据..我仍然没有发现这是否是自然的

我的情况是我需要在路由之间传输数据..我认为这就是状态

这是我的日志:

 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');
            }
        });
}

有任何想法吗？

Answer 1

基于 https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store在我自己的应用程序上，它应该如下所示:

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

但我没有看到 Provider和 Router在您的代码中， Provider在这里将主要状态传递给所有组件，没有它我不确定它是否能正常工作。

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