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和我自己的应用程序，它应该如下所示：

\n\n

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

\n\n

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

\n\n

\n

connect()通常，您可以在不将根组件包装在.xe2\x80\x99 中的情况下使用Provider。

\n

\n