리액트 Thunk

Freesian·2023년 2월 2일
0

1.Thunk

비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어

reducer로 접근하기전 중간에 우리가 하고자 하는 작업 및 편집을 함수로 따로 만들어 dispatch 함수 인자값에 넣는 방식

(액션 객체가 아닌 처리함수를 디스패치 할 수 있음)

//export const 함수이름 = createAsyncThunk( "action value", "콜백함수", );
export const __addNumber = createAsyncThunk(
// 첫번째 인자 : action value
"addNumber",
// 두번째 인자 : 콜백함수
(payload, thunkAPI) => {
setTimeout(() => { thunkAPI.dispatch(addNumber(payload));
}, 3000);
}
);
const initialState = { number: 0, };
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
addNumber: (state, action) => {
state.number = state.number + action.payload;
},
minusNumber: (state, action) => {
state.number = state.number - action.payload;
},
},
});

profile
prompt('마라탕 몇 단계요?');

0개의 댓글