Jak wysłać akcję po kliknięciu linku podczas korzystania z React-Router i Redux?

Question

Załóżmy, że mam Link, który przesyła mnie do strony w celu dodania/edycji wpisu na liście.

Jak wysłać akcję Redux, gdy klikam na samym Link, aby najpierw zaktualizować sklep Redux, zanim zostanie on przekierowany na tę stronę.

Np .: Klikam na przycisk Edytuj -> Akcja jest wysyłana -> Zapisz zaktualizowany, {'state': 'edit-mode'} -> Przejdź do przekierowania.

A może masz inny sposób na wykonanie tego, co próbuję zrobić?

Może po zamontowaniu podzespołu wykonam akcję podobną do stateToEdit na podstawie określonych warunków? Jeśli tak, to pokaż mi swoją drogę. Dzięki

PS: Używam tylko jednego komponentu do wszystkich operacji dodawania/edycji/usuwania. Więc myślę o sposób, aby uczynić na podstawie state czy jej na edit-mode lub delete-mode itp

Answer 1

Oto kilka sposobów, można iść o rozwiązanie tego problemu:

1. Zamiast Link, spróbuj użyć funkcji browserHistory.push(path) z funkcją onClick.
   • Wewnątrz onClick można dispatch swoje działanie, a następnie push do nowej lokalizacji.
   • Jeśli jednak chcesz wykonać tę serię czynności w różnych komponentach, prawdopodobnie będziesz cierpieć z powodu duplikacji kodu.
2. Bardziej wytrzymałe sposobem rozwiązania tego problemu byłoby wdrożyć redux-thunk, który zapewnia ogólny sposób wykonywania wielu „działania” (może to być wywołanie działania Redux lub wykonywania operacji asynchronicznej, lub obu!) W odpowiedź na zmianę.
   • Dan ma świetną odpowiedź tutaj podkreślając prostotę co redux-thunk faktycznie oferuje: Can I dispatch multiple actions without Redux Thunk middleware?
   • W twoim przypadku, w funkcji incrementTwice, wyobraź sobie tylko zastąpienie jednego z połączeń dispatch(increment) z wezwaniem do browserHistory.push(action.path), podobnie jak poniżej:

Redux pomyślał działania

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