Navigieren durch Seiten mit Redux und React-Router

Question

Ich habe eine Reihe von Seiten, um Daten von einem Benutzer zu erfassen. Ich möchte Redux mit React-Router verwenden, um durch meine Seiten zu navigieren, anstatt auf jede Seite manuell zu verknüpfen.

Ich habe eine sehr einfache Router Setup.

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

Und ein sehr einfach 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; 
    } 
} 

wie kann ich meine NEXT_PAGE Aktion verwenden, um durch meine App zu navigieren?

Answer 1

Sie können etwas wie async Aktion tun, aber Sie müssen redux-thunk middleare https://github.com/gaearon/redux-thunk angeschlossen haben.

Hier ist Beispielcode:

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