redux 툴킷

이 포스트에서 우리는 redux 툴킷이 얼마나 유용한지 그리고 그것이 테이블에 무엇을 가져오는지 알게 될 것입니다.

-먼저 카운터 앱에 대한 redux 스토어를 이전 방식으로 구성할 수 있습니다.
- 그런 다음 몇 가지 작업을 시작합니다.
-그러면 툴킷으로 동일한 코드를 작성할 것입니다.

여기 예전 방식으로 내 redux 설정이 있습니다.

import { createStore } from "redux";

const initialState = {
  counter: 0,
};

// actions
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const RESET = "RESET";

// counter reducer
const counterReducer = (state = initialState, action) => {
  if (action.type === INCREMENT) {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === DECREMENT) {
    return {
      counter: state.counter - 1,
    };
  }
  if (action.type === RESET) {
    return {
      counter: 0,
    };
  }

  return state;
};

// ccounter store
const store = createStore(counterReducer);
export default store;

//here we fire diffrent actions 
// increment
dispatch({type: INCREMENT})

// decrement
dispatch({type: DECREMENT})

// reset
dispatch({type: RESET})

다음은 redux 툴킷과 동일한 접근 방식입니다.

import { configureStore, createSlice } from "@reduxjs/toolkit";
// initial state
const initialState = {
  counter: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState: initialState,
  // here we replaced the reducer with this helper function which gives us ability to mutate the state directly 
  reducers: {
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
    reset(state) {
      state.counter = 0;
    },
    increase(state) {
      state.counter = state.counter + action.payload;
    },
  },
});

// actions to be used from inside the component later to make changes to our state 
export const counterActions = counterSlice.actions;

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

export default store;

//increment
counterActions.increment()

//decrement
counterActions.decrement()

//reset
counterActions.reset()

// and if you asking of course you can pass data (payload) 
like this 

for example as a parameter becase we still have access to the action payload
counterActions.increase(5)

지금까지 우리가 성취한 것을 간단히 요약
-리액트와 리덕스로 두 가지 방법으로 간단한 카운터를 만들었습니다.
- 우리가 redux의 예전 방식을 사용한 첫 번째 방법이며 처음에 구성하는 것이 약간 혼란스럽고 복잡합니다.
-그래서 이 문제를 해결하기 위해 redux 툴킷이 제공됩니다.
-툴킷을 사용하는 평균적인 이유는 redux 구성을 단순화하기 위함입니다.
- 여기서는 두 가지 방법을 사용하는 것의 장단점에 대해 말하는 것이 아닙니다. 차이점을 실용적인 방식으로 설명하는 것을 선호했습니다.

즐기 셨으면 좋겠습니다
;)