[리액트] 리덕스툴킷

리덕스를 사용함에 있어 좀 더 편의성있게 사용할 수 있게 해주는 툴이다.

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

해당 리덕스 reducer 있는 파일과 configStore 파일에 위와 같이 toolkit을 import해주고,

dispatch(loadData())

처럼 사용하는 것은 맞으나

reducer와 action creator 부분이 다르다

export const loadFB = createAsyncThunk("words/loadFB", async () => {
  const dbData = await getDocs(collection(db, "words"));
  const newWords = [];
  dbData.forEach((word) => {
    newWords.push({ id: word.id, ...word.data() });
  });
  newWords.sort((a, b) => a.timeStamp > b.timeStamp);
  return newWords;
});

이렇게 Firebase에 접근하고,

const words = createSlice({
  name: "wordsReducer",
  initialState: {
    words: [],
    status: null,
  },
  extraReducers: {
    [loadFB.pending.type]: (state) => {
      state.status = "loading";
    },
    [loadFB.fulfilled.type]: (state, action) => {
      state.status = "success";
      state.words = action.payload;
    },
    [loadFB.rejected.type]: (state) => {
      state.status = "failed";
    },

reducer는 위와 같이 사용한다.
사실상 firebase에 접근하는 부분이 없다면 코드가 굉장히 짧아질 것이다.