จะเรียกใช้การโทรกลับหลังจากอัปเดตสถานะใน Redux ได้อย่างไร

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-สัญญา (มิดเดิลแวร์จะส่งค่าที่แก้ไขแล้วของสัญญา)

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โดยไม่มีความสัมพันธ์ใด สถานะร้านค้าสามารถอัปเดตได้จากแหล่งที่มาหลายแหล่งนอกจากส่วนประกอบของคุณแล้วการเดินทางข้ามเวลายังสามารถเปลี่ยนสถานะและจะไม่ถูกส่งผ่าน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>
}

คุณสามารถใช้subscribeListener และจะถูกเรียกเมื่อมีการส่งการดำเนินการ ภายในเครื่องฟังคุณจะได้รับข้อมูลร้านค้าล่าสุด

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

คุณสามารถใช้ thunk กับการโทรกลับ

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

เป็นวิธีง่ายๆที่คุณสามารถใช้ได้: redux-สัญญา

แต่ถ้าคุณใช้redux-thunkคุณควรทำเช่นนี้:

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