[React] Redux toolkit

* Redux Toolkit

Redux Toolkit | Redux Toolkit

$ npm install @reduxjs/toolkit

리덕스 툴킷 패키지 설치 후, package.json에서 

    "redux": "^4.2.1",

삭제(redux toolkit에 redux가 포함되어있기 때문)

store폴더 내에 있는 index.js에서 사용.(리덕스 store에서 redux toolkit사용)

---

* createSlice

리듀서 함수의 대상인 초기 상태(state)와 "슬라이스 이름(name)"을 받아 리듀서와 상태에 해당하는 액션 생성자와 액션 타입을 자동으로 생성하는 함수.

 

+) createReducer와의 차이

- createSlice가 createReducer보다 강력하고, 한 번에 몇 가지를 단순화한다.

 

//여기에 리덕스 코드 들어옴.
import { createStore } from "redux";
import { createSlice } from "@reduxjs/toolkit";

const initialState = { counter: 0, showCounter: true };

//초기 상태 객체 아래에서 createSlice호출.
createSlice({
  //전역 상태의 slice를 만들어야한다.
  name: "counter", //모든 slice는 이름이 있어야한다.
  initialState, //초기상태
  reducers: {
    //리듀서는 객체 혹은 맵. 객체 안에 메서드가 존재하면 된다.
    increment(state) {
      //redux toolkit과 createSlice를 사용하면 기존의 상태를 바꿀 수 없음.
      state.counter++;
    }, //여기 있는 모든 메서드는 최근 값 state를 받는다.
    decrement(state) {
      state.counter--;
    }, //더이상 action을 넣을 필요 없음.(서로 다른 메서드가 호출되기 때문.)
    //increase에는 payload가 필요하다.(추가데이터가 필요함)'
    increase(state, action) {
      state.counter = state.counter + action.amount;
    },
    toggleCounter(state) {
      state.showCounter = !state.showCounter;
    },
  },
});

---

*configureStore

기본 redux내부 함수인 combineReducers사용할 수 있지만,

reduxjs/toolkit내부 함수인 configureStore함수를 가져와서 사용할 수 있다.

 

configureStore는 createStore처럼 store를 만든다.

다른점은, 여러 개의 리듀서를 하나의 리듀서로 쉽게 합칠 수 있다.

 

//configureStore에 객체를 전달한다. 리듀서함수가 아니라 객체를.
const store = configureStore({
  //configureStore 객체 내부에서 reducer프로퍼티를 정의한다.
  //redux에는 전역 상태를 담당하는 단 하나의 주요 리듀서 함수만 있어야한다.
  //여기서는 단일 리듀서 함수를 정의할 수 있다 ex) reducer: counterSlice.reducer
  //어플리케이션 규모가 커질수록 reducer함수가 많아지기때문에 map으로 묶는걸 추천
  //{}객체로 묶어서 모든 리듀서를 하나의 큰 리듀서로 병합
  // reducer: { counter: counterSlice.reducer }
  reducer: counterSlice.reducer,
});