如何在Redux中更新状态后触发关闭回调？

javascript reactjs redux

2022-08-30 05:39:25

在 React 中，状态不会立即更新，因此我们可以在中使用回调。但是如何在Redux中做到这一点呢？setState(state, callback)

调用后，我需要立即对更新的状态执行一些操作。this.props.dispatch(updateState(key, value))

有没有办法调用具有最新状态的回调，就像我在 React 中所做的那样？

答案 1

组件应更新以接收新的道具。

有一些方法可以实现你的目标：

1. 组件DidUpdate检查值是否更改，然后执行某些操作。

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

2. redux-promise（中间件将调度 promise 的解析值）

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

答案 2

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