2015-11-11 10 views

risposta

7

Ho appena avvolto le mie vie in una funzione che li restituisce.

Questo permette di passare al negozio redux come argomento

Qualsiasi onEnter/onExit funzioni sono anche definite in là in modo da avere accesso a tale argomento e può storedispatch() roba.

import React from 'react' 
import { IndexRoute, Route } from 'react-router' 

import App from './components/app' 
import FourOhFour from './components/pages/404' 
import Home from './components/home' 
import LogIn from './components/account/log_in' 
import ResetPassword from './components/account/reset_password' 
import SignUp from './components/account/sign_up' 

export function getRoutes (store) { 
    function doSomething (thing) { 
    store.dispatch(addToDoActionCreator(thing)) 
    } 

    function authenticate (nextState, replaceState) { 
    const { currentUser } = store.getState(); 

    if (!currentUser) { 
     replaceState(null, '/log-in'); 
    } 
    } 

    return (
    <Route path='/' component={App}> 
     <IndexRoute component={Home} onEnter={(nextState, replaceState)=>{doSomething('get coffee')}} /> 

     <Route path='log-in' component={LogIn} onEnter={authenticate} /> 
     <Route path='sign-up' component={SignUp} /> 
     <Route path='reset-password' component={ResetPassword} /> 

     <Route path="*" component={FourOhFour}/> 
    </Route> 
); 
} 

Sul lato server (express.js per me) Stabilisco un negozio redux abbastanza presto con il middleware. Qualcosa come questo.

server.use((req, res, next) => { 
    const createStoreWithMiddleware = applyMiddleware(
    thunkMiddleware 
)(createStore); 
    res.store = createStoreWithMiddleware(rootReducer); 

    next(); 
} 

Così ora il negozio è attaccato all'oggetto risposta e può essere utilizzato da altri middleware/rotte. Possono ottenere lo stato (res.store.getState()) e inviarlo allo stato di aggiornamento.

3

Basta creare il tuo negozio redux in un file separato e richiederlo quando è necessario.

// store.js 
 

 
import { createStore } from 'redux' 
 
import todoApp from './reducers' 
 
    
 
export default createStore(todoApp);

// the file where you define your routes and onEnter 
 

 
import { render } from 'react-dom'; 
 
import { Router, Route } from 'react-router'; 
 
import store, { dispatch } from './store.js'; 
 

 
function enterHandler(){ 
 
    dispatch(allTheGoodStuff); 
 
} 
 

 
render(
 
    <Router> 
 
    <Route onEnter={ enterHandler } ... 
 
)

+1

Questo non funzionerebbe bene per le applicazioni universali però. –

+1

mi sono imbattuto in una condizione di gara per tentare questa strategia, quindi ymmv, vedi: https://github.com/rackt/react-redux/issues/181#issuecomment-164626032 –

+1

Puoi fornire alcuni dettagli sulla situazione @ DanBarov? –