経路が変更された後にReact＆Redux状態が空になる

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 

0123：状態は

のためである、これは私のログです

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が主な状態を渡すためにここにあります私はそれが適切に動作するかどうかはわかりません。

通常は、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'); 
    } 
}); 

私はまだリアクト学び、決しててる専門家のあらゆる種類です。だから私はこれがうまくいくことを100％確信しているわけではない。しかし、それは私が現在知っているものに基づいて支援する努力です。