Как отправить действие при нажатии на ссылку при использовании React-Router & Redux?

Скажем, у меня есть Link, который отправляет меня на страницу для добавления/редактирования записи списка.

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

Например: Я нажимаю кнопку "Изменить" → "Отправлено действие" → "Обновление магазина", {'state': 'edit-mode'} → Перейти к перенаправлению.

Или у вас есть другой способ сделать то, что я пытаюсь сделать?

Может быть, когда компонент смонтирован, я буду запускать действие вроде stateToEdit на основе определенных условий? Если да, тогда, пожалуйста, покажите мне свой путь. Благодаря

PS: Я использую только один компонент для добавления/редактирования/удаления. Поэтому я думаю о способе рендеринга на основе state, будь то на edit-mode или delete-mode и т.д.

Ответы

Ответ 1

Вот несколько способов решения этой проблемы:

Вместо использования Link попробуйте использовать browserHistory.push(path) с помощью функции onClick.
- Внутри onClick вы можете dispatch выполнить свое действие, а затем push в новое место.
- Однако, если вы хотите выполнить эту серию действий в различных компонентах, вы, вероятно, будете испытывать дублирование кода.
Более надежным способом решения этой проблемы будет реализация redux-thunk, которая обеспечивает общий способ выполнения нескольких "действий" (будь то вызов действия Redux или выполнение операции async или обоих) в ответ к изменению.
- У Dan есть отличный ответ, в котором подчеркивается простота того, что redux-thunk действительно предлагает: Можно ли отправлять несколько действий без промежуточного ПО Redux Thunk?
- В вашем случае в функции incrementTwice представьте, что просто замените один из вызовов dispatch(increment) на вызов browserHistory.push(action.path), как показано ниже:

Действие Redux thunk

export const dispatchThenRoute = (myAction, myPath) => {
    return (dispatch) => {
        dispatch(myAction)
        browserHistory.push(myPath);
    }
};