Redux에서 상태를 업데이트 한 후 콜백을 트리거하는 방법은 무엇입니까?

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리스너를 사용할 수 있으며 액션이 전달 될 때 호출됩니다. 리스너 내부에서 최신 매장 데이터를 얻을 수 있습니다.

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

콜백과 함께 썽크를 사용할 수 있습니다.

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;
  }
}