In React wird der Status nicht sofort aktualisiert, sodass wir den Rückruf in verwenden können setState(state, callback)
. Aber wie geht das in Redux?
Nach dem Aufruf von this.props.dispatch(updateState(key, value))
muss ich sofort etwas mit dem aktualisierten Status tun.
Gibt es eine Möglichkeit, einen Rückruf mit dem neuesten Status wie in React aufzurufen?
javascript
reactjs
redux
Ziegel Yang
quelle
quelle
thunk
?dispatch()
ist eine synchrone Aktivität. Der aktualisierte Status sollte in der nächsten Zeile verfügbar sein.thunk
.Antworten:
Komponente sollte aktualisiert werden, um neue Requisiten zu erhalten.
Es gibt Möglichkeiten, Ihr Ziel zu erreichen:
1. componentDidUpdate Überprüfen Sie, ob der Wert geändert wurde, und tun Sie dann etwas.
componentDidUpdate(prevProps){ if(prevProps.value !== this.props.value){ alert(prevProps.value) } }
2. Redux-Versprechen (Middleware versendet den aufgelösten Wert des Versprechens)
export const updateState = (key, value)=> Promise.resolve({ type:'UPDATE_STATE', key, value })
dann in Komponente
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(); };
dann in Komponente
this.props.dispatch(updateState(key, value)).then(()=>{ alert(this.props.value) })
quelle
redux-thunk
Beispiel verwenden Sie es so,dispatch
als ob es synchron wäre. Ist das der Fall?dispatch
ist nicht synchron. Ohne diePromise.resolve()
,this.props.value
würde immer noch den alten Wert zurück. Es ist immer noch eine Art asynchroner Aufschub erforderlich (das Referenzieren aus einem heraussetTimeout
würde beispielsweise auch funktionieren).TypeError: _this.props.dispatch is not a function
?Der wichtigste Punkt bei React ist der Datenfluss in eine Richtung. In Ihrem Beispiel bedeutet dies, dass das Versenden einer Aktion und die Behandlung von Statusänderungen entkoppelt werden sollten.
Sie sollten nicht denken wie "Ich habe es getan
A
, jetztX
wird esY
und ich kümmere mich darum ", sondern "Was mache ich, wenn esX
wirdY
", ohne irgendeine Beziehung zuA
. Der Speicherstatus kann aus mehreren Quellen aktualisiert werden. Zusätzlich zu Ihrer Komponente kann Time Travel auch den Status ändern und wird nicht über Ihren Status weitergeleitetA
Versandpunkt weitergeleitet.Grundsätzlich bedeutet dies, dass Sie verwenden sollten,
componentWillReceiveProps
wie es von @Utro vorgeschlagen wurdequelle
componentWillReceiveProps
es veraltet ist?static getDerivedStateFromProps()
scheint kein geeigneter Ersatz zu sein, da es, soweit ich dasMit Hooks API:
useEffect
mit der Requisite als Eingabe.import React, { useEffect} from 'react' import { useSelector } from 'react-redux' export default function ValueComponent() { const value = useSelectror(store => store.pathTo.value) useEffect(() => { console.log('New value', value) return () => { console.log('Prev value', value) } }, [value]) return <div> {value} </div> }
quelle
Du könntest benutzen
subscribe
Listener verwenden und er wird aufgerufen, wenn eine Aktion ausgelöst wird. Im Listener erhalten Sie die neuesten Geschäftsdaten.http://redux.js.org/docs/api/Store.html#subscribelistener
quelle
subscribe
Wird nur ausgelöst, wenn eine Aktion ausgelöst wird. Es gibt keine Möglichkeitsubscribe
, Sie wissen zu lassen, ob Ihr API-Aufruf Daten zurückgegeben hat. Ich denke! : DSie können einen Thunk mit einem Rückruf verwenden
myThunk = cb => dispatch => myAsyncOp(...) .then(res => dispatch(res)) .then(() => cb()) // Do whatever you want here. .catch(err => handleError(err))
quelle
Als einfache Lösung können Sie verwenden: Redux-Versprechen
Aber wenn Sie Redux-Thunk verwenden , sollten Sie Folgendes tun:
function addCost(data) { return dispatch => { var promise1 = new Promise(function(resolve, reject) { dispatch(something); }); return promise1; } }
quelle