リンク経由で戻るときと戻るボタンを押したときの私の状態が異なるのはなぜですか？

Question

私は、私のreduxストア内のappPageData状態に接続されているメインのレイアウトコンポーネントを持っています。デフォルトの状態は次のようになります。

const initialSate = { 
    appPageData: null, 
    fetching: false, 
    fetched: false, 
    error: null, 
}; 

マイレイアウトコンポーネントは次のようになります。

import React, { Component, cloneElement, PropTypes } from 'react'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 

//Components 
import Footer from '../components/Footer'; 
import Header from '../components/Header'; 

//Actions 
import { fetchPage } from '../actions/appPageActions'; 

class Layout extends Component { 

    componentWillMount() { 
    const {pathname, query} = this.props.location; 
    this.props.fetchPage(pathname, query);  
    } 

    componentWillReceiveProps(nextProps) { 
    const {pathname, query} = this.props.location; 
    const {pathname: nextPathname, query: nextQuery} = nextProps.location; 
    if(pathname !== nextPathname || query !== nextQuery) { 
     this.props.fetchPage(nextPathname, nextQuery); 
    } 
    } 

    render() { 
    const { appPageData, location, fetched, error } = this.props; 

    return (
     <div> 
     <Header json={header}/> 
     <section class="container" id="content" role="main"> 
      <div class="row"> 
      <div class="col-md-12"> 
       {cloneElement(this.props.children, { appPageData: appPageData, fetched: fetched, error: error })} 
      </div> 
      </div> 
     </section> 
     <Footer json={footer}/> 
     </div> 
    ); 
    } 
} 

// Connect the component to the Redux store: 
function mapStateToProps(state) { 
    return { 
    appPageData: state.appPageData.appPageData, 
    fetched: state.appPageData.fetched 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 
           fetchPage: fetchPage 
          } 
          , dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Layout); 

私はフェッチのロードインジケータを示しいずれかの順序で、子コンポーネントにダウン小道具渡し、またはコンポーネントを表示することができます。私は、私のappPageData状態が初期状態、私のレイアウトにリセットされているので、私は戻るボタンを押すと、子コンポーネントのブレーキ、をナビゲートするには、リンクをリンクするメニューでは、プロパティが「フェッチされた」とみなします。

私appPageReducerは、次のようになります。

const initialSate = { 
    appPageData: null, 
    fetching: false, 
    fetched: false, 
    error: null, 
}; 

export default function reducer(state = initialSate, action) { 
    const {type, payload} = action; 
    switch (type) { 
     case '@@router/LOCATION_CHANGE': { 
     return initialSate; 
     } 
     case 'FETCH_PAGE': { 
     return {...state, fetching: true, fetched: false}; 
     } 
     case 'FETCH_PAGE_REJECTED': { 
     return {...state, fetching: false, error: payload}; 
     } 
     case 'FETCH_PAGE_FULFILLED': { 
     return { 
      ...state, 
      appPageData: payload, 
      fetching: false, 
      fetched: true, 
      error: null 
     }; 
     } 
    } 
    return state; 
} 

EDIT：あなたは、私が '@@ルータ/ LOCATION_CHANGE' に聞いて見ることができるように私のapp.jsこの

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory } from 'react-router'; 
import { Provider } from 'react-redux'; 
import { syncHistoryWithStore } from 'react-router-redux'; 

//Main store of the app 
import store from './stores/store'; 

//Main layout component of the app 
import Layout from './pages/Layout'; 
import Data from './pages/Data'; 
import Login from './pages/Auth/Login'; 

// Create an enhanced history that syncs navigation events with the store 
const history = syncHistoryWithStore(browserHistory, store); 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={history}> 
     <Route path={appIndexURL} component={Layout}> 
     <Route path={'**/**/a/data/**'} component={Data}/> 
     <Route path={'**/**/a/login'} component={Login}/> 
     </Route> 
    </Router> 
    </Provider>, 
app); 

のように見えます状態をリセットする。 redux開発者コンソールでは、状態が正しく変更されていることがわかります。 LinkまたはBackボタンを使用するかどうかにかかわらず、アクションのディスパッチ方法や状態の更新方法に違いはありません。しかし、レイアウトコンポーネントは同じですが、同じ方法ではありません。

状態が更新される前に、[戻る]を押すとすぐにレイアウトが再描画されますか？これには何らかの理由がありますか？

Answer 1

すべてのコードは正しいです。反応したルータを更新した後、すべてが期待通りに機能しました。