✅✅리덕스 툴킷 사용 이유와 모듈페이지의 전부
@reduxjs/toolkit에서 createAsyncThunk와 createSlice를 가져와 axios를 사용하여 사용자 정의 API 파일에서 가져온다
"createAsyncThunk"는 비동기 thunk 액션 생성자를 생성하는 보조 함수입니다. Thunk를 사용하면 비동기 액션을 디스패치 할 수 있으며 그런 다음 디스패치 함수를 사용하여 다른 액션을 디스패치 할 수 있습니다. 이 코드는 fetchTodo, postTodo 및 __deleteTodo 세 가지 thunk를 정의한다.
- __fetchTodo는 서버에서 todo 목록을 검색하기 위해 API GET 요청을 수행.
- __postTodo는 서버의 목록에 새로운 todo 항목을 추가하기 위해 API POST 요청을 수행.
- __deleteTodo는 서버에서 todo 항목을 제거하기 위해 API DELETE 요청을 수행.
각 thunk는 API 요청 상태에 따라 다른 액션을 디스패치합니다. 요청이 성공하면 검색된 데이터를 페이로드로 사용하여 이행(fulfilled) 액션을 디스패치합니다. 요청이 아직 처리 중이면 대기(pending) 액션을 디스패치합니다. 요청이 실패하면 오류 메시지를 페이로드로 사용하여 거부(rejected) 액션을 디스패치합니다.
==>각 thunk는 비동기 요청의 상태에 따라 pending, fulfilled, 또는 rejected 액션을 디스패치합니다. 각 slice의 extraReducers 필드는 이러한 액션에 대한 응답으로 상태를 업데이트하는 방법을 정의하는 데 사용됩니다.
createSlice는 Redux 리듀서 및 액션을 생성하는 또 다른 보조 함수입니다. 이 코드는 fetchtodoSlice, posttodoSlice 및 deletetodoSlice 세 개의 slice를 정의함.
각 slice에는 initialState 객체가 있어 slice의 초기 상태를 정의합니다. 또한 extraReducers 객체가 있어 앞에서 정의한 thunk에서 디스패치된 액션을 처리하는 방법을 지정합니다.
ex)
fetchtodoSlice는 __fetchTodo 액션을 처리합니다. 페이로드로 검색된 데이터가 전달되면 상태.todos 배열을 해당 데이터로 설정하고 isLoading, isError 및 error를 기본값으로 설정합니다. 대기(pending) 액션이 디스패치되면 isLoading을 true로 설정하고 isError 및 error를 기본값으로 설정합니다. 거부(rejected) 액션이 디스패치되면 isLoading을 false로, isError를 true로 및 error를 오류 메시지 페이로드로 설정합니다.
마찬가지로 posttodoSlice 및 deletetodoSlice는 각각 postTodo 및 deleteTodo 액션을 처리합니다.
✅ 미들웨어부분~~
✅ 리듀서부분~~~
[https://github.com/wnsgur1855/Redux-Thunk-ToDoList] 나의 깃허브 링크이다 여기에 주석처리하며서 하나하나 설명해놨으니 나중에 더 한 번 더 볼 것
