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?

Question

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

Sau khi gọi số this.props.dispatch(updateState(key, value)), tôi cần làm điều gì đó với trạng thái 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 như những gì tôi làm trong React không?

Answer 1

Bạn có thể sử dụng subscribe người nghe và nó sẽ được gọi khi một hành động được gửi đi. Bên trong người 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#subscribelistener

Answer 2

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

có nhiều cách để đạt được mục tiêu của bạn: LIVE DEMO for examples

1. componentWillReceiveProps/componentDidUpdate kiểm tra nếu giá trị được thay đổi, sau đó làm điều gì đó ..

componentWillReceiveProps(nextProps){ 
    if(nextProps.value!==this.props.value){alert(nextProps.value)} 
    } 

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

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

sau đó trong 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 phần

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

Answer 3

Điểm quan trọng nhất về Phản ứng là một chiều luồng dữ liệu. Trong ví dụ của bạn 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 riêng.

Bạn không nên suy nghĩ như "Tôi đã làm A, bây giờ trở thành XY và tôi xử lý nó", nhưng "Tôi phải làm gì khi X trở thành Y", mà không cần bất kỳ liên quan đến A. Trạng thái cửa hàng có thể được cập nhật từ các nguồn mutiple, ngoài thành phần của bạn, Time Travel cũng có thể thay đổi trạng thái và nó sẽ không được chuyển qua điểm công văn A của bạn.

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