Как организовать состояние с помощью редукса и ретранслятора?

Redux выступает за использование одного магазина с одним состоянием. Тем не менее, с помощью ретранслятора вы получаете несколько страниц, каждый из которых имеет свой собственный корневой компонент верхнего уровня.

Как следует подключать редукцию с помощью приложения-адаптера с несколькими страницами? React-router 1.0 больше не позволяет передавать реквизиты на маршруты, поэтому создание маршрутизатора компонента верхнего уровня, который содержит состояние для всех страниц, больше невозможен и невозможен.

Ответ 1

Если вы используете редуктивный + реактивный маршрутизатор, я бы очень рекомендовал использовать редукционный маршрутизатор - это позволит вам хранить информацию о маршруте в вашем магазине. Обычно у меня есть следующая настройка.

redux-router: ^ 1.0.0-beta3/ реакция-маршрутизатор ": ^ 1.0.0-rc1/ redux: "^ 3.0.2/ реагировать: "^ 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>
        );
    }
}

Итак, вы можете видеть, что есть один компонент более высокого порядка, который обертывает остальные ваши маршруты.

Ответ 2

Redux-маршрутизатор больше не совместим с response-router v4, и вышеупомянутое решение не будет работать.

Таким образом, я предлагаю использовать redux-little-router. В отличие от редукционного маршрутизатора он не зависит от реактивного маршрутизатора, а вместо него заменяет его.

С его помощью вы можете делать такие вещи, как:

Нажмите на новые маршруты из ваших асинхронных действий:

export function navigateAbout() {
  return (dispatch) => {
    dispatch(push('/about'))
  }
}

Смотрите сведения о вашем маршрутизаторе (текущий путь, querystring и params) внутри инструментов redux-dev и получите доступ к этим деталям из хранилища, как и для любой другой опоры:

function mapStateToProps(state) {
  return {
    string: state.router.query.string
  }
}

PS. Вы можете ссылаться или использовать этот отредактированный шаблон с уже реализованным сокращением-сокращением-сокращением