Доступ к интерактивному маршрутизатору из действия/хранилища flummox

Question

Я хочу иметь возможность совершать вызов API в действии Flummox и переходить по-разному в зависимости от ответа. Я могу передать маршрутизатор в призыв к действию, но я ищу совет по потенциально лучшему пути.

UPDATE:

Правильный ответ ниже, но я хотел бы добавить некоторые детали к этому.

Я делаю изоморфное приложение, которое 1. необходимо получить данные из api и 2. может потребоваться перенаправить на основе ответа api. Независимо от того, что я делаю, нужно работать через приложение express.js и реагировать.

Я сделал небольшую библиотеку, которая выполняет вызов api и возвращает некоторые результаты. Я передаю ему объект (объект params запроса из выражения для серверной стороны или аналогичный объект, который я создаю для реакции). Этот lib делает запрос, определяет, требуется ли перенаправление, и передает обратно ошибки, путь (строка), перенаправление (логическое) и данные (json).

В выражении, если логическое перенаправление является истинным, я просто перенаправляю его с текущими параметрами запроса. Если это ложь, я передаю данные в поток через действие, которое обновляет хранилище. Затем я renderToString обрабатывает, сериализует хранилища, так что сторона clint может загружаться и отправлять визуализированную страницу клиенту.

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

Надеюсь, это кому-то поможет.

Answer 1

В моей настройке у меня есть свой собственный модуль маршрутизатора, который просто обертывает экземпляр react-router, который я создаю при запуске. Это облегчает для любой части приложения просто требовать этот модуль и делать то, что ему нужно.

Но я бы посоветовал вам не иметь побочных эффектов, как вызов маршрутизатора внутри ваших действий. Действия должны касаться изменения состояния вашего приложения и ничего более. Должно быть возможным вызвать одно и то же действие из любого места приложения, которое должно выполнить мутацию, которую инкапсулирует действие.

Так что, если вы переключаете маршруты во время действия, вы в основном привязываете это действие к этому конкретному случаю использования. Давайте возьмем пример. У вас есть список todo, с полем ввода внизу, чтобы добавить новое todo. Для этого варианта использования может оказаться полезным переключить маршрут после сохранения todo. Возможно, вы переключитесь на Recent Todos или что-то в этом роде. Но тогда появляется новый вариант использования, где вы хотите добавить новые todos во время другого рабочего процесса, возможно, пользователь планирует ее неделю и должен иметь возможность добавлять todos в разные дни. Вы хотите то же самое действие, которое добавляет todo, но вы, конечно же, не хотите переключать маршруты, потому что пользователь все еще планирует неделю.

Я не использовал Flummox много, но из моего понимания ваш объект Flux возвращает все действие, которое возвращается при запуске действия. Поэтому вместо того, чтобы изменить маршрут в своем действии, обязательно верните ответ от действия и пусть ваш компонент решит, должен ли маршрут быть изменен. Что-то вроде этого:

// todo-action.js 
class TodoActions extends Actions { 
    createMessage(todo) { 
    return TodoStore.saveToServer(todo); 
    } 
} 

// todo-list.js 
const TodoList extends React.Component { 
    render() { 
    ... 
    } 
    addTodo(todo) { 
    this.props.flux.addTodo(todo).then(response => { 
     if (response.some.prop === someValue) { 
     this.props.router.transitionTo(...); 
     } 
    }); 
    } 
} 

Таким образом, действие по-прежнему красиво отделено от изменения маршрута. Если вы хотите использовать переключатель маршрута в нескольких местах, вы можете инкапсулировать его в методе addTodoAndSwitchRoute в свой класс Flux.