CODEWITHSUNDEEP
reactjsreduxrxjs
tcoulson
tcoulson

Reputation: 624

Redux action creator finishes, update subscribed component

I have a component for properties on my page. It opens in a modal, and changes properties in redux store, most notably a number of items to display in search results. I also have a component called Search, which basically uses the redux store to update itself. What I am wrestling with is, I need to know when the action creator for number of items is finished, notifying my search it has completed this action, so I can execute search with the new number of items variable.

In the past I would use componentWillRecieveProps and just check for the change, but that has gone away in favor of getDerivedStateFromProps. This appears to be one way I can go, but I also thought about using RXJS to call observables, but I cannot see any examples that do what I am specifically trying to accomplish (a notification that an action creator is complete). Anyone have this same issue? Which method is better road to tread, RXJS vs getDerivedStateFromProps? I am also using redux-thunk, but I cannot see a way to tie in a subscription to an action creator in any way. Thanks in advance.

Edit: Sample Code Action Creator:

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

When the dispatch is complete I want Search component to update. I am not sure how much more code is needed.

Upvotes: 0

Views: 104

Answers (1)

Anas
Anas

Reputation: 5727

To setup redux observable as a middleware in your app:

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

Then in your root epic, you can listen to your action:

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

Upvotes: 1

Related Questions