ReduxとReact-routerを使用してページを移動します。

Question

ユーザーからデータを取得するための一連のページがあります。手動で各ページにリンクするのではなく、ReduxとReact-Routerを使用して、自分のページをナビゲートしたいと考えています。

非常に簡単なRouterセットアップがあります。

import Screen1 from './components/Screen1'; 
import Screen2 from './components/Screen2'; 
import Screen3 from './components/Screen3'; 
import Screen4 from './components/Screen4'; 
import Screen5 from './components/Screen5'; 
import Screen6 from './components/Screen6'; 

let store = createStore(lydApp); 

render(
    <Router> 
     <div> 
      <Route path="/" component={Screen1} /> 
      <Route path="/1" component={Screen2} /> 
      <Route path="/2" component={Screen3} /> 
      <Route path="/3" component={Screen4} /> 
      <Route path="/4" component={Screen5} /> 
      <Route path="/5" component={Screen6} /> 
     </div> 
    </Router>, 
    document.getElementById('root') 
); 

、非常に基本的なreducer：

import { NEXT_PAGE, PREVIOUS_PAGE } from '../constants/ActionTypes'; 

const initialState = [ 
    { 
    title: 'Screen1', 
    complete: 0, 
    }, 
    { 
    title: 'Screen2', 
    complete: 0, 
    }, 
    { 
    title: 'Screen3', 
    complete: 0, 
    }, 
    { 
    title: 'Screen4', 
    complete: 0, 
    }, 
    { 
    title: 'Screen5', 
    complete: 0, 
    }, 
]; 

export default function PageChecker(state = initialState, action) { 
    switch (action.type) { 
    case NEXT_PAGE: 

    //somehow check page is complete and move to next page 

    default: 
     return state; 
    } 
} 

どのように私は私のアプリをナビゲートするために私NEXT_PAGEアクションを使用することができますか？

Answer 1

あなたは非同期アクションのようにすることができますが、redux-thunk middleare https://github.com/gaearon/redux-thunkが必要です。

ここではサンプルコードです：

export default function PageChecker(state = initialState, action) { 
    return (dispatch, getState) => { 
    switch (action.type) { 
     case NEXT_PAGE: 

     dispatch(go(`/page/${action.page + 1}`)) 

     return state; 
     break; 
     default: 
     return state; 
    } 
    } 
}