리액트 파일을 전달 할 떄는, node-modules 파일을 삭제하고 보내야한다.
why?
파일 용량이 엄청 커짐, 어차피 파일을 받는 사람은 package.json 기반으로 설치를 하기 때문에, npm i 만 해주면 끝임

만약 npm i 설치 시 오류가 걸린다면?, 강제로 설치해야함
-> npm i --force

db.json을 만들어보자

{
  "todos": [
    {
      "id": 1,
      "title": "제목1",
      "contents": "내용1",
      "isDone": false
    },
    {
      "id": 2,
      "title": "제목2",
      "contents": "내용2",
      "isDone": false
    }
  ]
}

• 서버 통신이 끝나면 -> 내부 변수 업데이트 무한루프

1

이제 todos를 추가한다.
-> 그러면 db에 넣고 스토어에 반영을 한다.
삭제를 한다.
-> 먼저 db에서 삭제를 하고 스토어에 반영을 한다.

2

1. db에 통신 할 수 있는 역할
2. 내부 스토어에서 반영을 할 수 있는 역할
   -> 비동기통신에 들어갈 부분은 extraReducer에 들어감

3

비동기 통신을 먼저 하기 위해 필요한건 ?
-> 바로 청크라는 개념임(미들웨어)
미들웨어 : 부가기능을 하는 녀석임,
툴킷에 내장되어 있어서 따로 설치가 필요 없음

4

청크를 사용하려면createAsyncThunk를 import 해야함

// 1. 추가
//첫번째 인자 : 이름
//두번째 인자 : 비동기함수

createAsyncThunk("ADD_TODO", async () => {
  await axios.post("http://localhost:3001/todos", {});
});

5

try catch문

export const __addTodoThunk = createAsyncThunk("ADD_TODO", async (매개변수) => {
  try {
    console.log("매개변수", 매개변수);
    // 시도할 내용(오류가 날 수 도 있음 서버한테 보내는 거임)
    await axios.post("http://localhost:3001/todos");
  } catch (error) {
    // 오류가 났을 때의 내용
    console.log(error);
  }
});

---

삭제를 해보자(delete)

export const __removeTodoThunk = createAsyncThunk(
 'REMOVE_TODO',
 async(arg,thunkAPI) =>{
  try{
await axios.delete(`http://localhost:4000/todos/${arg}`);
     return thunkAPI.fulfillWithValue(arg)
  } 
   catch(error){
   consoel.log('err)}
 }
 
 )


extraReducers:{
[__removeTodoThunk.fulfilled]:(state,action) =>{
  
 const newTodos = state.todos.filter((item)=> item.id != action.payload) 
 state.todos = newTodos
}
}
     
     
     

수정을해보자(patch는 일부수정, put은 다 수정)

export const __switchTodoThunk = createAsyncThunk(
 'REMOVE_TODO',
 async(arg,thunkAPI) =>{
  try{
await axios.patch(`http://localhost:4000/todos/${arg.id}`, {isDone: arg.isDone});
  return thunkAPI.fulfillWithValue(arg.id)
  } 
   catch(error){
   consoel.log('err)}
 }
 
 )

[__switchTodoThunk.fulfilled]: (state, action) => {
      state.todos = state.todos.map((t) => {
        if (t.id === action.payload.id) {
          return { ...t, isDone: !t.isDone };
        } else {
          return t;
        }
      });
    },

    [__switchTodoThunk.rejected]: (state, action) => {
      state.error = action.payload;
    },

patch의 특성상 false값을 true로 바꿈
하지만 우리는 isDone이 기존에 true인지 false인지 알 수가 없음