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。ストアの状態は、コンポーネントに加えて、複数のソースから更新できます。TimeTravelも状態を変更でき、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;
  }
}