Как сохранить состояние через переходы между маршрутизаторами

У меня есть довольно типичное приложение для реагирования на маршрутизатор:

var App = React.createClass({
    render: function() {
        return ( < RouteHandler /> );
    }
});

var routes = (
    <Route handler = { App }>
        < Route name = "Todo" path = "todo/:id" handler = {Todo}/>
        < DefaultRoute name = "Todos" handler = {Todos}/>
    </Route>
);

Router.run(routes, function(Handler) {
    React.render( < Handler /> , document.getElementById('content'));
});

Моя проблема в том, что у моего компонента Todos есть некоторые фильтры поиска на нем, и я хочу сохранить эти фильтры при переходе на конкретный Todo и обратно. Очевидным решением является сохранение этих значений фильтра в состоянии App, но я не могу найти элегантный способ разрешить доступ Todos к состоянию App.

Любые подсказки?

Добавление. Это приложение использует Reflux, а также реагирующий маршрутизатор.

Ответы

Ответ 1

Я бы URL-адрес, чтобы сохранить фильтры состояния и номера страниц для списков.

Один из реагирующих маршрутизаторов "Преимущества этого подхода": URL-адреса - это ваша первая мысль, а не задумка.

URL-адрес является основополагающей частью Интернета, используйте его в своих интересах, не пытаясь избежать его.

Сохраняя состояние фильтра в URL-адресе, вы получаете бесплатную поддержку кнопки, и вы позволяете своим пользователям сохранять это фильтрованное состояние в качестве закладки или ссылки.

Ответ 2

Вы можете сделать это, используя что-то вроде Reflux для управления состоянием всего вашего приложения. Он будет действовать как ваш центральный магазин и центральная командная библиотека (действия)

var Reflux = require('reflux');

var actions = Reflux.createActions(
  ["getAction", "saveAction"]
);

var DataStore = Reflux.createStore({
  data: data,
  listenables: [actions],
  init: function() {
    this.trigger(this.data);
  },
  onGetAction: function() {
    // some ajax if you like
  },
  onSaveAction: function() {
    // more ajax
  },
  getInitialState: function() {
    return this.data;
  }
});

var App = React.createClass({
  mixins: [Reflux.connect(DataStore, 'datastore')],
  render: function () {
    var d = this.state.datastore;
    return (
    ...

Ответ 3

Вы можете использовать дочерние элементы или рендеринг вместо компонента, чтобы скрывать, а не размонтировать компонент, когда переходите к другому. Имейте в виду, что размонтирование компонента является стандартным способом выполнения действий в React и React-router, поскольку он поддерживает DOM меньше и, следовательно, быстрее. например.:

    <Route path={/some-path} children={({ match }) => {
              return (
    <div style={{ display: match ? 'block' : 'none' }}>
        <YourComponentHere/>
    </div>
        )
      }}
    />