Query in converting Plain Redux to REDUX TOOLKIT

Question

Description of what I want to achieve :

In my website, I want to show some alerts every now and then, maybe when user enters wrong email ID or passwords does not match etc. And I want to acheive this using redux.

My Solution in Plain Redux:

I am quite fluent writing all the boiler plate in plain redux, and am just starting to shift to redux toolkit. Below is the code for the above description

import { SET_ALERT, REMOVE_ALERT } from './types';
import { v4 as uuidv4 } from 'uuid';

export const setAlert = (msg, alertType) => dispatch => {
    const id = uuidv4();
    dispatch(
        {
            type: SET_ALERT,
            payload: {
                msg,
                alertType,
                id
            }
        }
    );


    setTimeout(() => {
        dispatch({ type: REMOVE_ALERT, payload: id });
    }, 5000);
}

Using redux thunk, I am first dispathing an action of type SET_ALERT, with an id, msg and alertType. The reducer then adds this alert to the array of alerts in the store.

After 5 seconds, I am dispatching an actions of the type REMOVE_ALERT, with just an id. So the reducer will remove that alert from the array of alerts in the store after 5 seconds.

convert this logic to redux toolkit: I have tried all the ways using createAsyncThunk and extraReducers but have got to nothing. Can someone Help me on how to achieve this logic

CORE CONCEPT: I want a pirticular alert message to stay for 5 seconds in the array of alerts store.

any other logic to achieve this solution would also be helpful

Query in converting Plain Redux to REDUX TOOLKIT

0 Answers0