Redux'da durumu güncelledikten sonra geri aramayı nasıl tetikleyebilirim?

React'te, durum anında güncellenmez, bu nedenle içinde geri aramayı kullanabiliriz setState(state, callback). Ama Redux'da nasıl yapılır?

Aradıktan sonra this.props.dispatch(updateState(key, value)), güncellenmiş durumla hemen bir şeyler yapmam gerekiyor.

React'te yaptığım gibi en son duruma sahip bir geri aramayı aramamın bir yolu var mı?

yeni sahne alabilmek için bileşen güncellenmelidir.

hedefinize ulaşmanın yolları vardır:

1. componentDidUpdate değerin değişip değişmediğini kontrol edin, sonra bir şeyler yapın ..

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

2. yeniden düzenleme vaadi (ara yazılım, sözün çözümlenmiş değerini gönderecektir)

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

sonra bileşende

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

sonra bileşende

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

React ile ilgili en önemli nokta tek yönlü veri akışıdır. Örneğinizde bu, bir eylem gönderme ve durum değişikliği işlemenin ayrıştırılması gerektiği anlamına gelir.

"Benim yaptığım gibi Sence olmamalı Aartık, Xolur Y" Ne zaman yaparım ve ben bunu hallederiz "ama Xolur Yherhangi bir bağlantısı olmayan," A. Mağaza durumu, bileşeninize ek olarak birden çok kaynaktan güncellenebilir, Time Travel da durumu değiştirebilir ve Agönderim noktanızdan geçilmez.

Temel componentWillReceivePropsolarak bu, @Utro tarafından önerildiği gibi kullanmanız gerektiği anlamına gelir

Hooks API ile:

useEffect giriş olarak prop ile.

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

subscribeDinleyiciyi kullanabilirsiniz ve bir eylem gönderildiğinde çağrılacaktır. Dinleyicinin içinde en son mağaza verilerini alacaksınız.

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

Geri arama ile thunk kullanabilirsiniz

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

Basit bir çözüm olarak şunları kullanabilirsiniz: redux-promise

Ama redux-thunk kullanıyorsanız , şöyle bir şey yapmalısınız:

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