Redx에서 상태를 업데이트한 후 콜백을 트리거하려면 어떻게 해야 합니까?

Redx에서 상태를 업데이트한 후 콜백을 트리거하려면 어떻게 해야 합니까?

리액트에서는 상태가 즉시 갱신되지 않기 때문에 콜백을 사용할 수 있습니다.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-display (중간웨어는 약속의 해결된 가치를 디스패치합니다)

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

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

React에서 가장 중요한 점은 단방향 데이터 흐름입니다.이 예에서는 액션 디스패치와 상태 변경 처리를 분리해야 합니다.

'내가 그랬어'라고 생각하면 안 돼A,지금이다X된다Y내가 알아서 할 거야"라고 말했지만, "어떻게 해야 하지?"X된다Y"와 관계 없이A스토어 상태는 컴포넌트뿐만 아니라 여러 소스에서 갱신할 수 있으며, Time Travel은 상태를 변경할 수 있으며, 이 정보는 다음 컴포넌트를 통해 전달되지 않습니다.A디스패치 포인트

기본적으로는 이 기능을 사용하여componentWillReceiveProps@Utro의 제안대로

사용할 수 있습니다.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;
  }
}

redux의dispatch이렇게 사슬을 끊을 수 있는 약속을 반환합니다.

     const submissionPromise: any = dispatch(submitFundRequest())
        submissionPromise
            .then((response: any) => {
                if(response.error) {
                    return console.log('There was an error', response)
                }
                Swal.fire({
                    title: 'Submission',
                    text: 'You have successfully submitted the requisition'
                })
            })
            .catch((err: any) => {
                console.log('Submission failed', err)
            })

response.error트렁크가 거부되었을 경우에만 설정됩니다.고객님의 고객명submitFundRequest이런 거 하면 거절할 수 있어

export const submitFundRequest = createAsyncThunk(
    'fundRequest/submitFundRequest',
    async function submit(payload, thunkAPI) {
        try {
            ...
        } catch(e: any) {
            const error = { message: e.response.statusMessage }
            return thunkAPI.rejectWithValue(error)
        }
    }
)

언급URL : https://stackoverflow.com/questions/39524855/how-to-trigger-off-callback-after-updating-state-in-redux