스파르타코딩클럽 내일배움캠프 TIL40

리덕스 툴킷

• slice를 이용하면, Reducer, Action Value, Action Creator를 한번에 구현할 수 있다.
• 툴킷을 사용하면, 별도의 설정없이 devtools를 사용할 수 있다.
  • 내장된 주요 패키지 : thunk, devtools, immer 등.

// 예시 코드

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    // 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자, 액션크리에이터가 된다.
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

Thunk

• 리덕스 미들웨어를 사용하면, 액션이 리듀서로 전달되기전에 중간에 어떤 작업을 더 할 수있다.
• Thunk를 사용하면, 객체가 아닌 함수를 dispatch 할 수 있게 해준다. [thunk의 핵심]
• 리덕스 툴킷에서 Thunk 함수를 생성할 때는 createAsyncThunk 를 이용한다.
• createAsyncThunk() 의 첫번째 자리에는 action value, 두번째에는 함수가 들어간다.
• 두번째로 들어가는 함수에서 2개의 인자를 꺼내 사용할 수 있는데, 첫번째 인자는 컴포넌트에서 보내준 payload이고, 두번째 인자는 thunk에서 제공하는 여러가지 기능이다.
• thunk 함수는 Reducers 아닌 외부에서 작성한 것 이므로, extraReducers 를 사용해야 한다.
• thunkAPI를 이용해서 Promise를 다룰 수 있다.
• 서버에서 가져오는 데이터는 로딩상태, 성공, 실패로 나누어서 상태를 관리하고, 컴포넌트 단에서도 이에 따라 다르게 조건부 렌더링을 한다.