Is it possible to update random component in a React app on a Redux store state change

Viewed 24

I have a React app and using Redux-Toolkit. I have a slice from which I take a list of entities and use them in several components. This list can be changed after I make some actions in different components of the app and an amount of entities will be changed after this.

There is a component which is counting the number of entities in this slice. It's done as a notification counter and should be displayed in different places in the app.

Is it possible to somehow rerender this notification component when there is a change in the Redux state?

Here is the Notification component

const NotificationCounter = ({ notificationType }) => {

    const invitations = selectAll(store.getState());
    const dispatch = useDispatch();

    useEffect(() => {
        switch (notificationType) {
            case "employerInvitations":
                if (invitations.length === 0) {
                    dispatch(invitationsList({
                        "Specification": 2,
                        "InvitationState": 4
                    }))
                        .then(res => setCounter(res.payload.length));
                
                } else {
                    setCounter(invitations.length)
                }
                break;
        }
    }, [invitations.length]);

Here is the slice itself. There are two reducers which can change the amount of entities in the slice

const invitationsSlice = createSlice({
    name: 'invitation',
    initialState: initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder

            .addCase(invitationsList.pending, (state) => { })
            .addCase(invitationsList.fulfilled, (state, action) => {
                invitationsAdapter.removeAll(state);
                invitationsAdapter.setMany(state, action.payload);
            })
            .addCase(invitationsList.rejected, (state) => {  })

            .addCase(invitationChange.pending, (state) => {  })
            .addCase(invitationChange.fulfilled, (state, action) => {
                invitationsAdapter.removeOne(state, action.payload);
            })
            .addCase(invitationChange.rejected, (state) => { })
    }
});

I understand how I can do it if the NotificationCounter component would be the children of the components in which I dispatch changes to the state. But this comopnents are very spread across the app so there is no way to do it so.

EDIT: Added screenshot of how this look in the App notification example

0 Answers
Related