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

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

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

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

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

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

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

4b9b3361

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

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

Действие Redux thunk

export const dispatchThenRoute = (myAction, myPath) => {
    return (dispatch) => {
        dispatch(myAction)
        browserHistory.push(myPath);
    }
}; 
11
14 июля '16 в 20:06
источник