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.
