Як активувати зворотний виклик після оновлення стану в 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-promis (проміжне програмне забезпечення надішле вирішене значення обіцянки)

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

Найважливішим моментом щодо React є односторонній потік даних. У вашому прикладі це означає, що диспетчеризація дії та обробка змін стану повинні бути роз'єднані між собою.

Ви не повинні думати на кшталт "Я це зробив A, тепер Xстаю Yі я з цим справляюся", а "Що я роблю, коли Xстає Y", без будь-якого відношення до A. Стан магазину можна оновити з безлічі джерел, окрім вашого компонента, Подорож у часі також може змінювати стан, і він не буде передаватися через вашу Aточку відправлення.

В основному це означає, що ви повинні використовувати те componentWillReceiveProps, що було запропоновано @Utro

За допомогою API Hooks:

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

Ви можете використовувати 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-promis

Але якщо ви використовуєте redux-thunk , вам слід зробити щось подібне:

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