Jak wywołać wywołanie zwrotne po aktualizacji stanu w Redux?

Question

W React stan nie jest natychmiast aktualizowany, więc możemy użyć wywołania zwrotnego w setState(state, callback). Ale jak to zrobić w Redux?

Po wywołaniu this.props.dispatch(updateState(key, value)), muszę natychmiast zrobić coś ze zaktualizowanym stanem.

Czy istnieje sposób, w jaki mogę zadzwonić do callbacku z najnowszym stanem, jak to, co robię w React?

Answer 1

Można użyć detektora subscribe i zostanie wywołany po wywołaniu akcji. Wewnątrz słuchacza otrzymasz najnowsze dane sklepu.

http://redux.js.org/docs/api/Store.html#subscribelistener

Answer 2

komponent powinien być aktualizowany nowe rekwizyty.

istnieją sposoby, aby osiągnąć swój cel: LIVE DEMO for examples

1. componentWillReceiveProps/componentDidUpdate sprawdzić, czy wartość zostanie zmieniona, wówczas coś zrobić ..

componentWillReceiveProps(nextProps){ 
    if(nextProps.value!==this.props.value){alert(nextProps.value)} 
    } 

2. Redux-obietnica (oprogramowanie pośrednie wyśle ​​rozstrzygniętą wartość obietnicy)

export const updateState = (key, value)=> 
Promise.resolve({ 
    type:'UPDATE_STATE', 
    key, value 
}) 

następnie w składniku

this.props.dispatch(updateState(key, value)).then(()=>{ 
    alert(this.props.value) 
}) 

2. Redux-thunk

export const updateState = (key, value)=> dispatch=>{ 
dispatch({ 
     type:'UPDATE_STATE', 
     key, value 
    }) 
return Promise.resolve() 
} 

następnie w składniku

this.props.dispatch(updateState(key, value)).then(()=>{ 
    alert(this.props.value) 
}) 

Answer 3

Najważniejsze o React jednokierunkowy przepływ danych. W twoim przykładzie oznacza to, że wysyłka akcji i zmiana stanu powinny zostać odłączone.

Nie należy myśleć jak „Zrobiłem A, teraz X staje Y i poradzić”, ale „Co mam zrobić, gdy X staje Y”, bez jakiegokolwiek związku A. Stan magazynu można aktualizować z wielu źródeł, oprócz elementu, podróż w czasie również może zmienić stan i nie zostanie przekazana przez punkt wysyłkowy A.

Zasadniczo oznacza to, że należy użyć componentWillReceiveProps jak to zostało zaproponowane przez @Utro