리덕스를 배우며 툴킷도 배우게 되었다.
그러다 비동기 처리를 어떻게 해야할지 모르겠어서 일단 리듀서에서 처리를 해보았지만 promise를 주기는 하나 사용할수가 없었고,
컴퍼넌트 내부에서 비동기로 데이터를 불러와 리스트로 만들었을때는 이상하게도 사용할수가 없는 리스트였다. 내부에 데이터는 있으나 length는 0인 리스트가 나왔다.
이 역시 이유를 몰라 비동기 처리를 위해 어떤것을 할수 있는지 찾아보다 thunk라는 미들웨어에 대해서 알게 되었다.

Thunk

const asyncfuc = createAsyncThunk("chat/loadchat", async () => {
  const chatList = [];
  const loadchats = await getDocs(collection(db, "chats"));
  loadchats.forEach((doc) => {
    chatList.push({
      id: doc.id,
      ...doc.data(),
    });
  });
  return chatList;
});

createAsyncThunk를 이용해 firebase에서 데이터를 받아와 chatList를 만드는 과정

const chatslice = createSlice({
  name: "chat",
  initialState,
  reducers: {
    leavechatFB: (state, action) => {
      addDoc(collection(db, "chats"), action.payload);
    },
  },
  extraReducers: (builder) => {
    builder.addCase(asyncfuc.pending, (state, action) => {
      state.status = "Loading";
    });
    builder.addCase(asyncfuc.fulfilled, (state, action) => {
      state.chats.push(action.payload);
    });
    builder.addCase(asyncfuc.rejected, (state, action) => {
      state.status = "Fail";
    });
  },
});

export { asyncfuc };

thunk를 사용할때는 extraReducers를 사용한다.
asyncfuc 함수의 상태에 따라 원하는 리턴값을 줄수 있다.

asyncfuc함수를 실행할때는 리덕스를 사용할떄와 같이 usedispatch를 사용하면 된다.