Как я могу завладеть магазином/отправкой в ​​React-Router onEnter?

Question

Я не использую Redux-Router (может быть, мне нужно?), Но мой маршрутизатор завернут провайдером, и хранилище передается на это.

Я хотел бы ознакомиться с состоянием и отправкой в ​​обработчике onEnter.

Answer 1

Я просто завернуты мои маршруты в функцию, которая возвращает их.

Это позволяет передавать Redux магазин в качестве аргумента

Любые onEnter/onExit функции также определяются там, так что они имеют доступ к этому store аргумента и может dispatch() материал.

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

На стороне сервера (express.js для меня) Я устанавливаю магазин redux довольно рано с помощью промежуточного программного обеспечения. Что-то вроде этого.

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

    next(); 
} 

Итак, магазин прикреплен к объекту ответа и может использоваться другим промежуточным программным обеспечением/маршрутами. Они могут получить состояние (res.store.getState()) и отправить для обновления состояния.

Answer 2

Просто создайте магазин redux в отдельном файле и потребуйте его, когда это необходимо.

// 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 } ... 
 
)