我如何在 React-Router onEnter 中获取 store/dispatch？

Question

我没有使用 Redux-Router（也许我必须使用？）但我的路由器由 Provider 包装并且商店正在传递给它。

我想在 onEnter 处理程序中读取状态和分派。

Answer 1

只需在单独的文件中创建您的 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 } ...
)

Answer 2

我只是将我的路由包装在一个 returns 它们的函数中。

这允许您将 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();
}

所以现在商店附加到响应对象并且可以被其他人使用 middleware/routes。他们可以获取状态 (res.store.getState()) 并分派更新状态。

我如何在 React-Router onEnter 中获取 store/dispatch？

How do I get a hold of the store/dispatch in React-Router onEnter?

reactjs

react-router

redux