[React]Thunk

import { applyMiddleware, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';
import React from 'react';
//제이슨 서버를 띄었다고 가정을 하고 제이슨 서버에 있는 데이터 가져오기 


 const initial_State = {
    todos:[],
 }

// 1. Thunk 함수 만들기  export const getTodosThunk = createAsyncThunk(); <- 기본뼈대
// => 툴킷에서 제공하는 createAsyncThunk 기능을 이용해서  thunk 함수를 만든다
// createAsyncThunk() 괄호안에 "액션이름", ()=>{} 함수가 들어감
// ()=>{}함수가 중간에 내가 할거 
// dispatch(todos) 원래 액션패치가 디스패치를 통해서 리듀서로 바로가는데
//thunk 이용해서 서버에와서 todos를 가져오고 그걸 가지고 리듀서로 가 라는 중간작업을 ()=>{} 함수에서 이뤄짐
export const getTodosThunk = createAsyncThunk("getTodos",async(payload,thunkAPI)=>{
 // 해야할거 2. 중간 작업 (=서버에서 가져오는거니까 여기서 Axios를 쓴다 )
 // 해야할거 3.dispatch(원래 하려고 했던 디스패치) - app.js에서 

 //4. 중간작업 Axios와 dispatch가 동시에 실행되지 않도록 async await 써줌
 //5. 가져온 값을 변수에 할당함 const data = 
 const data = await axios.get("url"); //10번째에 해줘야하는 일해주고 지워줌=35번에 붙여주고 지워줌
 // async await을 통해서 axios~("url"); get을 하고 가져온 값을 data에 넣고 나서 dispatch 작업 해줌 
 // 6. consol.log(data.data);
 
  
  // 8. 6번 콘솔로 확인할 우리가 가져온 데이터를 스토에 넣기 -> 툴킷에서는 자동화되어있음 
  // async(payload, thunkAPI) 써줌 thunkAPI 이름 맘대로 지어도됨
  // console.log(thunkAPI (쓰면 자동완성으로 기능들 나오는데).필요한기능 점 뒤에 적어줌) 
 // thunkAPI.fulfillwithValue(); 
 // fulfillwithValue:  기능 :  자동 디스패치 해줌 요청에 성공했을만, 실패하면 실패한쪽에 디스패치해주고, 진행중이면 진행중인 상태 유지
 // 9. 23번째 줄 그냥 두면 이게 실패했는지 성공인지 몰라 그래서 try catch 쓴다 
 try { //10. 트라이 안에 23번째 넣어줌 
    const data = await axios.get("url");
    return thunkAPI.fulfillWithValue(data.data)
    //11.thunkAPI.fulfillWithValue() 넣어줌 6번째 순서인 콘솔에서 확인한 받아와야할 값 괄호에 넣어줌
    // 12. 정리 => const~ ("url") 성공했을때 디스패치 해줌 
    //13. 이제 받는곳 만들어줌 => extraReducers 에서 모듈을 만들어 줘야함 
 } catch (error) {
   return thunkAPI.rejectWithValue(e);
    //12-1. 실패했을떄    
 }                       

});

export const TodoSlice = createSlice({
    name : "todos",
    initial_State,
    reducers:{},
    extraReducers:{
        //14. [thunk함수.fulfilled] 가 try안에서 디스패치했을때 여기서 받아줌
        [getTodosThunk.fulfilled]: (state.action)=>{
            //15. console.log(action) try이 [getTodoThunk]~ 애 온거 확인 할 수 있음 
            state.todos=action.payload;
            //16.
        },
        [getTodosThunk.rejected]:(state.action)=>{
            // console.log(action);
        },
    }
})

export const {} = TodoSlice.actions;
export default TodoSlice.reducer;

//7.컴퍼넌트가 마운트가 됫을떄 디스패치를 해서 겟투드떤크를 실행시키면 콘솔로그에 가져온 데이터 나옴 
// app.js
// useEffet(()=>{
// dispatch(getTodosThunk());
// })
//