Redux ToolKit

 1. Redux ToolKit 

   Redux 를 좀 더 쉽게 사용할 수 있도록 만들어진 라이브러리로 공식문서에서도 RTK 를 사용할 것을 권장

   

  2. 설치

npm install @reduxjs/toolkit react-redux

  3. 왜 Redux Toolkit 인가?

  기존 Redux 에서는 

 

   Action Type 작성

   Action 생성자 작성                                

   Reducer 작성

   을 했지만 RTK 에서는 CreateSlice 함수 하나로 가능

 

 

  그리고

   Combine Reducers 후 createStore 작성 하는 것도 configureStore 함수 하나로 가능 하다.

 

 

   4. 사용방법

    1) createSlice

        슬라이스 객체는  name, initalState , reducers 라는 3개의 필드가 있어야 함        

import { createSlice } from '@reduxjs/toolkit';

const counterSlicer = createSlice({
  name: "Counter",                        // Slice 의 이름
  initialState: 0,                        // state 초기값
  reducers: {                             // Reducer
    increment(state, action) {            // action 1
      return state + action.payload;
    },
    decrement(state, action) {           // action 2
      return state - action.payload;
    },
  },
});

   diapatch(counterSlicer.action.increment( 인자 )) 에 인자를 전달하면 action.payload 에 인자의 값이 들어가 있다.

 

 

   2) configureStore 

      이제 여기에 여러개의 reducer 를 넣어서 store 에 전달 하면 된다. 

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    counter: counterSlicer.reducer,  // counterSlicer의 reducer 로 counter 값을 관리
  },
});

 

 

이제 상태를 꺼내오고 변경 하면 된다.  다음음 Redux 와 동일하다.

 

 

  적용한 컴포넌트를 Provider 로 감싸고

import { Provider } from "react-redux";

  <Provider store={store}>
    <App />
  </Provider>

 

 

configureStore 의 반환값을 받은 store의 state 중 counter 값을 가져온다. 

import { useSelector } from "react-redux"; 
 
const counter = useSelector((state) => state.counter); // Store의
                                                       // counter 값을 가져온다.

 

 

 

Dispatch 후 createSlice 함수의 Reducers 함수에 인자로 전달하면 action 값으로 전달되어 상태가 변경된다.

 const dispatch = useDispatch();

 

 

      <div>counter: {counter}</div>
      <button onClick={() => dispatch(counterSlicer.actions.increment(1))}>
        +
      </button>
      <button onClick={() => dispatch(counterSlicer.actions.decrement(-1))}>
        -
      </button>