Làm thế nào để kích hoạt gọi lại sau khi cập nhật trạng thái trong Redux?

Trong React, trạng thái không được cập nhật ngay lập tức, vì vậy chúng ta có thể sử dụng callback trong setState(state, callback). Nhưng làm thế nào để làm điều đó trong Redux?

Sau khi gọi this.props.dispatch(updateState(key, value)), tôi cần phải làm gì đó với trạng thái được cập nhật ngay lập tức.

Có cách nào tôi có thể gọi một cuộc gọi lại với trạng thái mới nhất giống như những gì tôi làm trong React không?

thành phần cần được cập nhật để nhận các đạo cụ mới.

có những cách để đạt được mục tiêu của bạn:

1. componentDidUpdate kiểm tra xem giá trị có bị thay đổi không, sau đó làm điều gì đó ..

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

2. redux-promise (phần mềm trung gian sẽ gửi giá trị được giải quyết của lời hứa)

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

sau đó trong thành phần

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

sau đó trong thành phần

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

Điểm quan trọng nhất về React là luồng dữ liệu một chiều. Trong ví dụ của bạn, điều đó có nghĩa là, việc gửi một hành động và xử lý thay đổi trạng thái nên được tách rời.

Bạn không nên nghĩ như "Tôi đã làm A, bây giờ Xtrở thành Yvà tôi xử lý nó", nhưng "Tôi phải làm gì khi Xtrở thành Y", không liên quan đến A. Trạng thái cửa hàng có thể được cập nhật từ nhiều nguồn khác nhau, ngoài thành phần của bạn, Du hành thời gian cũng có thể thay đổi trạng thái và nó sẽ không được chuyển qua Ađiểm gửi của bạn .

Về cơ bản, điều đó có nghĩa là bạn nên sử dụng componentWillReceivePropsnhư nó được đề xuất bởi @Utro

Với API Hooks:

useEffect với giá trị đầu vào.

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

Bạn có thể sử dụng trình subscribelắng nghe và nó sẽ được gọi khi một hành động được gửi đi. Bên trong trình nghe, bạn sẽ nhận được dữ liệu lưu trữ mới nhất.

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

Bạn có thể sử dụng một cú đánh với một cuộc gọi lại

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

Như một giải pháp đơn giản bạn có thể sử dụng: redux-promise

Nhưng nếu bạn sử dụng redux-thunk , bạn nên làm như sau:

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