14

Redux は、単一の状態を持つ単一のストアの使用を提唱しています。ただし、react-router を使用すると、それぞれが独自の最上位ルート コンポーネントを持つ複数のページを取得できます。

複数のページを持つreact-routerアプリでreduxを接続するにはどうすればよいですか? React-router 1.0 では、props をルートに渡すことができなくなったため、ルーターをすべてのページの状態を含む最上位コンポーネントにすることは、もはや不可能であり、実現可能でもありません。

4

2 に答える 2

9

redux + react-router を使用している場合は、redux-router も使用することを強くお勧めします。これにより、ルート情報をストアに保持できます。通常、次の設定をしています。

redux-router: ^1.0.0-beta3 / react-router": ^1.0.0-rc1 / redux: "^3.0.2 / react: "^0.14.0

//index.js 【エントリーポイント】

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';
import { Provider } from 'react-redux';
import createStore from './utils/create-store';
import routes from './bootstrap/routes';
import { ReduxRouter } from 'redux-router';

const store = createStore(routes);

ReactDOM.render(
    <Provider store={store}>
        <ReduxRouter>
            {routes}
        </ReduxRouter>
    </Provider>,
    document.getElementById('root')
);

// create-store.js

import { applyMiddleware, createStore, combineReducers, compose } from 'redux';
import * as reducers from '../reducers/index';
import promiseMiddleware from './promise-middleware';
import { routerStateReducer, reduxReactRouter } from 'redux-router';
import history from './history'

/**
 * Sets up the redux store.  Responsible for loading up the reducers and middleware.
 *
 * @param routes
 */
export default function create(routes) {
    const composedReducers = combineReducers({
        router: routerStateReducer,
        ...reducers
    });
    const finalCreateStore = compose(applyMiddleware(promiseMiddleware),
        reduxReactRouter({
            routes,
            history
        }))(createStore);
    let store = finalCreateStore(composedReducers);
    return store;
}

// routes.js

import React from 'react';
import { Route } from 'react-router';
import  App from './app';

module.exports = (
    <Route component={App}>
        ...all your routes go here
    </Route>
);

// app.js

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';

export default class App extends React.Component {

    render() {
        const { props: { children } } = this;
        return (
            <div className="app-container">
              {children}
            </div>
        );
    }
}

ご覧のとおり、残りのルートをラップする高次コンポーネントが 1 つあります。

于 2015-10-19T07:50:07.717 に答える