如何在分派操作后侦听 Redux 存储中的特定属性更改

Question

我目前正在尝试概念化如何根据在另一个组件中分派后的数据更改来处理在组件中分派操作。

以这个场景为例：

dispatch(someAjax)

-> 状态更新中的属性。

在此之后，我需要另一个依赖于同一属性的组件来知道它已更新并根据新值分派操作。

处理此类“级联”操作的首选方法是什么，而不是使用某种类型的

value.on(change...

解决方案？

Answer 1

您可以将 Redux 的

mapStateToProps

和

connect

与 React 的

componentDidUpdate(prevProps, prevState, snapshot)

钩子一起使用。

所以基本上你的代码可能看起来像这样：

const mapStateToProps = (state) => ({ 
   specificProperty: state.specificProperty,
   // any props you need else
});

class YourComponent extends React.Component {
    render() {
      // render your component  
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.specificProperty !== this.props.specificProperty) {
            // Do whatever you want
        }
    }
}

YourComponent = connect(mapStateToProps)(YourComponent);

Answer 2

有两种基本方法：要么是在操作完成后区分状态的中间件，要么使用 Redux 的低级

store.subscribe

API。

Redux 常见问题解答有涵盖此问题的答案。 此外，我还保留了 Redux 相关插件和实用程序的分类列表，其中包括一组现有的商店更改订阅库，它们实现了监听数据更改的各种方法。

Answer 3

偶然发现这个问题，注意到最上面的答案已经过时了，

componentDidUpdate

等。我使用

"@reduxjs/toolkit": "^1.8.4"

和

"react-redux": "^8.0.2"

解决了这个问题，如下所示：

对于我的 redux 商店：

import { configureStore } from '@reduxjs/toolkit';
import { loadState, saveState, REDUX_KEY } from '../common';
import createReducer from './reducers'; // createReducer from '@reduxjs/toolkit


const store = configureStore({
    reducer: createReducer,
    preloadedState: loadState(REDUX_KEY), // loadState: JSON.parse() of store saved in localStorage
});

store.subscribe(() => saveState(REDUX_KEY, store.getState())); // saveState: JSON.stringify() and saves store to localStorage

export default store;

我的index.tsx：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import Application from './app';
import store from './redux/store';

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <Application />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root'),
);

然后在一个（通常是顶级）应用程序组件中，我想观察 redux 存储中的变化，我会得到类似的东西：

import React from 'react';
import { useSelector } from 'react-redux';
import { selectLoginStatus } './redux/selectors';

function LoginWatcher() {
    const loginStatus = useSelector(selectLoginStatus);

    // watch login status
    React.useEffect(() => {
        // perform action here when the state of 'status' updates
    }, [loginStatus]);

    return null;
}