Question

我正在建立一个反应和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和我自己的应用，它应该如下所示：

Static analysis:

1 errors were found during analysis.

Unrecognized keyword. (near "ON" at position 25)
SQL query: Edit Edit

SET FOREIGN_KEY_CHECKS = ON;

MySQL said: Documentation

#2014 - Commands out of sync; you can't run this command now

但我在代码中看不到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中，则无法使用connect()。

Answer 2

让我们尝试一下。

拿这个代码

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

并将其更改为：

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

我还在学习React，绝不是任何一位专家。所以我不是100％肯定这会起作用。但这是基于我目前所知的帮助。

反应＆amp; Redux - 路线改变后状态变空

2 个答案: