javascript - 如何使用 Redux 和 React-router 将路由拆分到不同的文件？

Question

我的应用程序中有很多路线。每个都有一个 onEnter 方法，该方法从 API 加载数据并在存储上触发一个操作 (thunk)。

const routeConfig = [
    {path: '/tutorial/:tutorialId', component: Tutorial, onEnter: tutorialEnter},
    {path: '/session/:sessionId', component: App, onEnter: sessionEnter},
    {path: '/session/:userId/:sessionId', component: App, onEnter: userSessionEnter},
    {path: '/template/:language/:sessionId', component: App, onEnter: templateEditEnter},
    {path: '/snippet/:language/:appType/:sessionId', component: App, onEnter: snippetEditEnter},
    {path: '/prepare/:sessionId', component: Library, onEnter: galleryPrepareEnter},
    {path: '/launch/:comboId', component: Launch, onEnter: launchEnter},
    ... more

];

const renderStore = () => {
    rootElement = document.getElementById('root')

    render(
        <MuiThemeProvider>
            <div className="root">
                <Provider store={store}>
                    <Router history={history} routes={routeConfig} onUpdate={onPageView}/>
                </Provider>
            </div>
        </MuiThemeProvider>,

        rootElement
    );
}

OnEnter 方法的示例:

const launchEnter = (location) => {
    let {comboId} = location.params;

    store.dispatch(appActions.getComboDetails(comboId))
    store.dispatch(appActions.getBuildRequestsForCombo(comboId))
}

我想将路由和 OnEnter 脚本拆分到不同的文件中。我可以创建一个返回包含某些路线的数组的方法，但如何访问商店？我的两个想法似乎有缺陷:

想法#1 - 包装商店。 LaunchRoutes.js:

export const getRoutes = (store) => {

    const launchEnter = (location) => {
        let {comboId} = location.params;

        store.dispatch(appActions.getComboDetails(comboId))
        store.dispatch(appActions.getBuildRequestsForCombo(comboId))
    }

    return [
        {path: '/launch/:comboId', component: Launch, onEnter: launchEnter},
    ];
}

将商店锁在这个封闭中感觉不对。

想法 #2 - 通过全局访问商店

const store = window.store;

const launchEnter = (location) => {
    let {comboId} = location.params;

    store.dispatch(appActions.getComboDetails(comboId))
    store.dispatch(appActions.getBuildRequestsForCombo(comboId))
}

export const getRoutes = (store) => {

    return [
        {path: '/launch/:comboId', component: Launch, onEnter: launchEnter},
    ];
}

这甚至比第一个使用窗口作为廉价出路的想法更糟糕。

有什么想法可以正确分割路线吗？

Answer 1

一种可能的解决方案是采用与 react-router 相同的路线 browserHistory和 hashHistory，这将创建一个商店模块并从那里导出您的商店实例。

根据您的代码结构，这可能有效，也可能无效，但本质上您将拥有一个 store.js:

import { createStore } from 'redux'
import reducers from './reducers'

export default createStore(reducers)

然后，您可以在整个项目中任何需要与之交互的地方导入store。

// index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'

import store from './store'

render((
  <Provider store={store}>...</Provider>
), holder)

和

// launchEnter.js
import store from './store'

const launchEnter = (location) => {
  let {comboId} = location.params;
  store.dispatch(appActions.getComboDetails(comboId))
  store.dispatch(appActions.getBuildRequestsForCombo(comboId))
}