Redux ToolKit

Redux ToolKit은 리덕스를 더 쉽게 사용하기 위해서 이다. 이름 그대로 리덕스를 위한 도구이다!

리덕스에는 문제점이 있다 . 대표적으로
1.리덕스의 스토어는 환경 설정하는데 너무 복잡하다

2.리덕스를 사용하려면 패키지를 많이 추가 해야한다!

3. 리덕스를 사용하기위해 작성해야하는 코드들이 너무 많다 !

아래 기존에 configStore.js 설정 방식이다

 const rootReducer = combineReducers({
   todos,
/});

 const store = createStore(rootReducer);

아래 리덕스 툴킷을 이용하여 똑같은 설정 방식이다

const store = configureStore({
 reducer: {
   todos,
 },
});

export default store;

기존에 rootReducer를 따로 만들지 않고 configureSore()를 이용하요 리듀서와 스토어를 한번에 만들고 있다!

또한 modules 도 많이 바뀌었다
아래 바뀐 modules 이다

const todosSlice = createSlice({
  name: "todos",
  initialState: initialState,
  reducers: {
    addTodo: (state, action) => {
      //action은 타입과 객체를 가지고있는 액션 객체이다!
      console.log("test");
      console.log(action);
      // return [...state, action.payload];
      state.push(action.payload); //푸쉬를 해도 들어온다 툴킷이 기본적으로 제공하는 기능때문에 가능함!
    }, //action creator 이름
    removeTodo: (state, action) => {
      return state.filter((item) => item.id !== action.payload);
    }, //action creator 이름  // return 필수
    switchTodo: (state, action) => {
      return state.map((item) => {
        if (item.id === action.payload) {
          console.log(item.isDone);
          console.log(action.payload, item.id);
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    }, //action creator 이름
  },
});

export const { addTodo, removeTodo, switchTodo } = todosSlice.actions; //actions 는 action creator 를 만들때 action 객체(타입과페이로)를 만들어준다
export default todosSlice.reducer;

확실히 리덕스 사용할 때 보다 코드를 생략한게 많다 액션스안에는 기본적으로 액션 객체를 가지고 있고 가지고 있기 때문에 위처럼 줄일 수 있다!