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ò store
dispatch()
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.
Questo non funzionerebbe bene per le applicazioni universali però. –
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 –
Puoi fornire alcuni dettagli sulla situazione @ DanBarov? –