import { PayloadAction, createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import { useDispatch } from "react-redux"; export enum ResultType { idle = 'idle', ing = 'ing', success = 'success', fail = 'fail', retry = 'retry', countdown = 'countdown' } interface ResultState { title: string | null; type: any | ResultType.idle; seconds: number | 0; } const initialState: ResultState = { title: null, type: ResultType.idle, seconds: 0 } const resultTime = 1; const countdownTime = 5; const resultSlice = createSlice({ name: 'result', initialState, reducers: { checkStart(state) { state.type = ResultType.ing; }, checkSuccess(state) { state.type = ResultType.success; }, checkFail(state) { state.type = ResultType.fail; }, checkRetry(state){ state.type = ResultType.retry; }, checkCountdown(state,action: PayloadAction) { state.title = action.payload; state.type = ResultType.countdown; }, checkCountdownEnd(state) { state.type = ResultType.idle; state.seconds = 0; }, resetStatus(state) { state.type = ResultType.idle; state.seconds = 0; } } } ); export const { checkStart, checkSuccess, checkFail, checkCountdownEnd, checkCountdown, resetStatus,checkRetry } = resultSlice.actions; export default resultSlice.reducer; export const setResult = createAsyncThunk('result/action', async (payload: {isSuccess:boolean}, { dispatch }) => { if (payload.isSuccess) { dispatch(checkSuccess()); setTimeout(() => { var count = countdownTime; dispatch(checkCountdown(count)); var timer = setInterval(()=>{ count--; dispatch(checkCountdown(count)); if (count<0){ clearInterval(timer); dispatch(resetStatus()) } },1000) }, resultTime*1000); } else { dispatch(checkFail()); setTimeout(()=>{ dispatch(resetStatus()); },resultTime*1000) } });