React＆Redux - 改變路由後狀態變空

我正在構建一個反應& redux應用程序，我遇到的問題是在執行browserHistory.push('/myroute')併成功路由後，我看到我的狀態已被清除，並且而我需要一些數據，這是從以前的路線狀態..我仍然沒有發現這是否是自然React＆Redux - 改變路由後狀態變空

我的情況是，我需要在路線之間傳輸數據..我認爲這是什麼國家是

這是我的日誌：

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

任何想法？

來源

2016-12-28 user1326293

在重定向回新路由之前，您可能需要保存狀態 –

您是否可以共享您的路由配置，以及如何將redux存儲映射到路由之前的組件中的組件道具以及在路由之後呈現的第二個組件中 – Swapnil

@Swapnil，加入 – user1326293

基於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()。

來源

2016-12-28 15:16:54 mgouault

我在我的'index.js'文件中的項目上有這些配置，我只是在外部文件中說明了路由。我的根組件被'Provider' – user1326293

讓我們來嘗試一下。

把這個代碼

.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％確定這會起作用。但是這是一種基於我目前所知道的基礎上的協助。

來源

2016-12-28 15:28:53

React＆Redux - 改變路由後狀態變空

回答

相關問題