Как вызывать обратный вызов после обновления состояния в Redux?

В React состояние не обновляется мгновенно, поэтому мы можем использовать обратный вызов в setState(state, callback). Но как это сделать в Redux?

После вызова this.props.dispatch(updateState(key, value)) мне нужно немедленно сделать что-то с обновленным состоянием.

Есть ли способ вызвать обратный вызов с последним состоянием, как то, что я делаю в React?

Ответ 1

компонент должен быть обновлен, чтобы получать новые реквизиты.

Есть способы достичь своей цели:

1. componentDidUpdate проверить, изменилось ли значение, а затем сделать что-то..

 componentDidUpdate(prevProps){
     if(prevProps.value !== this.props.value){ alert(prevProps.value) }
  }

2. избыточное обещание (промежуточное ПО будет отправлять разрешенное значение обещания)

export const updateState = (key, value)=>
Promise.resolve({
  type:'UPDATE_STATE',
  key, value
})

затем в компоненте

this.props.dispatch(updateState(key, value)).then(()=>{
   alert(this.props.value)
})

2. перевождь-санк

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

Ответ 2

Наиболее важным моментом в Реактировании является односторонний поток данных. В вашем примере это означает, что диспетчеризация действий и изменение состояния должны быть разделены.

Вы не должны думать, что "я сделал A, теперь X становится Y, и я его обрабатываю", но "Что мне делать, когда X становится Y", без какого-либо отношения к A. Состояние хранилища может быть обновлено из нескольких источников, в дополнение к вашему компоненту Time Travel также может изменять состояние, и оно не будет передано через пункт отправки A.

В основном это означает, что вы должны использовать componentWillReceiveProps, как это было предложено @Utro

Ответ 3

Вы можете использовать прослушиватель subscribe, и он будет вызываться при отправке действия. Внутри слушателя вы получите последние данные хранилища.

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

Ответ 4

Вы можете использовать Thunk с обратным вызовом

myThunk = cb => dispatch =>
  myAsyncOp(...)
    .then(res => dispatch(res))
    .then(() => cb()) // Do whatever you want here.
    .catch(err => handleError(err))

Ответ 5

С помощью Hooks API:

useEffect с пропеллером в качестве входа.

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

Ответ 6

Мой ответ не является правильным способом решения этой ситуации, но иногда вы можете использовать его:

let action = updateState(key, value)
this.props.dispatch(action)
// do what you want with the action

Ответ 7

В качестве простого решения вы можете использовать: redux-обещание

Но если вы используете redux-thunk, вы должны сделать следующее:

function addCost(data) {
  return dispatch => {
    var promise1 = new Promise(function(resolve, reject) {
      dispatch(something);
     });
    return promise1;
  }
}