React에서는 상태가 즉시 업데이트되지 않으므로 setState(state, callback)
. 하지만 Redux에서 어떻게할까요?
를 호출 한 후 this.props.dispatch(updateState(key, value))
즉시 업데이트 된 상태로 무언가를해야합니다.
React에서하는 것과 같은 최신 상태로 콜백을 호출 할 수있는 방법이 있습니까?
답변
새 소품을 받으려면 구성 요소를 업데이트해야합니다.
목표를 달성하는 방법이 있습니다.
1. componentDidUpdate 값이 변경되었는지 확인한 다음 작업을 수행합니다.
componentDidUpdate(prevProps){
if(prevProps.value !== this.props.value){ alert(prevProps.value) }
}
2. redux-promise (미들웨어가 promise 의 해결 된 값을 전달합니다)
export const updateState = (key, value)=>
Promise.resolve({
type:'UPDATE_STATE',
key, value
})
그런 다음 구성 요소
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();
};
그런 다음 구성 요소
this.props.dispatch(updateState(key, value)).then(()=>{
alert(this.props.value)
})
답변
React에서 가장 중요한 점은 단방향 데이터 흐름입니다. 귀하의 예에서 즉, 작업 전달 및 상태 변경 처리가 분리되어야 함을 의미합니다.
“내가 그랬던 것처럼 당신은 생각한다 A
, 지금 X
이된다 Y
“어떤 때 내가 어떻게 내가 그것을 처리 “하지만 X
될 Y
어떤 관계없이” A
. 상점 상태는 구성 요소 외에도 여러 소스에서 업데이트 할 수 있으며 시간 여행도 상태를 변경할 수 있으며 A
디스패치 지점을 통해 전달되지 않습니다 .
기본적으로 componentWillReceiveProps
@Utro가 제안한대로 사용해야 함을 의미합니다.
답변
Hooks API 사용 :
useEffect
소품을 입력으로 사용합니다.
import React, { useEffect} from 'react'
import { useSelector } from 'react-redux'
export default function ValueComponent() {
const value = useSelector(store => store.pathTo.value)
useEffect(() => {
console.log('New value', value)
return () => {
console.log('Prev value', value)
}
}, [value])
return <div> {value} </div>
}
답변
subscribe
리스너를 사용할 수 있으며 액션이 전달 될 때 호출됩니다. 리스너 내부에서 최신 매장 데이터를 얻을 수 있습니다.
답변
콜백과 함께 썽크를 사용할 수 있습니다.
myThunk = cb => dispatch =>
myAsyncOp(...)
.then(res => dispatch(res))
.then(() => cb()) // Do whatever you want here.
.catch(err => handleError(err))
답변
간단한 솔루션으로 사용할 수 있습니다.
redux-promise
그러나 redux-thunk 를 사용한다면 다음 과 같이해야합니다 :
function addCost(data) {
return dispatch => {
var promise1 = new Promise(function(resolve, reject) {
dispatch(something);
});
return promise1;
}
}