时间戳

首页 > 解决方案 > Redux action creator 完成，更新订阅的组件

reactjs - Redux action creator 完成，更新订阅的组件

问题描述

我的页面上有一个属性组件。它以模式打开，并更改 redux 存储中的属性，最显着的是要在搜索结果中显示的一些项目。我还有一个叫做 Search 的组件，它基本上使用 redux 存储来更新自己。我正在努力的是，我需要知道项目数量的动作创建者何时完成，通知我的搜索它已经完成了这个动作，所以我可以使用新的项目数量变量执行搜索。

过去我会使用 componentWillRecieveProps 并只检查更改，但已经消失了，取而代之的是 getDerivedStateFromProps。这似乎是我可以采用的一种方式，但我也考虑过使用 RXJS 来调用 observables，但我看不到任何示例可以完成我特别想要完成的工作（动作创建者完成的通知）。有人有同样的问题吗？RXJS 与 getDerivedStateFromProps 哪种方法更好？我也在使用 redux-thunk，但我看不到以任何方式将订阅绑定到动作创建者的方法。提前致谢。

编辑：示例代码动作创建者：

export function setNumRecords(val){
    return dispatch => {
        localStorage.setItem('numRecords', val);
        dispatch({type: 'SET_NUM_RECORDS', numRecords:val})
    };
}

调度完成后，我希望更新搜索组件。我不确定还需要多少代码。

标签： reactjsreduxrxjs

解决方案

要将 redux observable 设置为应用程序中的中间件：

https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html

然后在你的根史诗中，你可以听你的动作：

import { ofType } from 'redux-observable';
import {
  tap,
  mapTo,
} from 'rxjs/operators';

const setNumRecordsEpic = action$ => action$.pipe(
    ofType('SET_NUM_RECORDS'),
    tap(() => console.log('Here...'))
    mapTo({ type: 'SOME_OTHER_ACTION' })
);

推荐阅读