Redux Tool kit

Redux Took kit?

• 리덕스를 사용하려면 작성해야할 코드와 파일이 기본적으로 너무 많다 
  → 보일러플레이트가 증가한다!
• Redux Tool Kit은 리덕스를 편하게 사용하는데 유용한 패키지가 들어있는 도구 모음이다!
• Redux Tool Kit을 사용하면 Action Type, Action Creator, Initial Value, Reducer를 한번에 묶어서 사용할 수 있다!

Redux / Redux Tool Kit 설치

yarn add redux react-redux
yarn add @reduxjs/toolkit

---

리덕스 모듈(슬라이스) 만들기

• src 폴더 아래에 redux라는 폴더를 만들고, 그 안에 modules라는 폴더를 만들자.
• modules 아래에 bucketSlice.js라는 리덕스 모듈을 만들어보자.

기존의 리덕스 모듈

• 기존의 Redux 모듈과 비교를 해보자!!

// Action
const LOAD = 'bucket/LOAD';
const CREATE = 'bucket/CREATE';

// Initial State
const initialState = {list: ["치킨 먹기", "컴퓨터 게임하기", "여행 가기"]};

// Action Creator
export const loadBucket = (bucket) => { 
    return {type: LOAD, bucket};
}

export const createBucket = (bucket) => {
    return {type: CREATE, bucket};
}

// Reducer
export default function reducer(state = initialState, action = {}) {
    switch (action.type) {
      // do reducer stuff
      case "bucket/LOAD":
        return state;
  
      case "bucket/CREATE":
        return {...state, list: [...state.list, action.bucket]};

      default:
        return state;
    }
}

Redux Tool Kit으로 만든 모듈

• Redux Tool Kit을 사용하면 createSlice로 Action Creator, Initial Value, Reducer를 한번에 묶어서 사용할 수 있다.
• createSlice 안에 initialState, name, reducer를 넣어주고 reducer 안에 action creator를 넣어준다.
  원래 action creator는 action 객체만 리턴했지만 slice는 행동까지 넣어준다. 
• action creator의 두번째 인자 action의 payload로 컴포넌트에서 dipatch한 action creator의 파라미터를 가져올 수 있다!
• 중요 포인트로 기존에 Redux를 사용할 때 불변성을 유지하기 위해서 스프레드 연산자를 사용했지만 immer라는 패키지를 redux tool kit이 가지고 있어서 그냥 state를 직접 건드려도 불변성이 유지된다!
• redux와 마찬가지로 reducer와 action creator를 export 해야한다
  [slice].reducer로 리듀서를 export하고 [slice].actions에서 action creator를 export하자

redux/modules/bucketSlice.js

import {createSlice} from "@reduxjs/toolkit";
// slice 생성하기
const bucketSlice = createSlice({
    // slice 안에는 initial state, action creator, reducers 등 모든게 한번에 들어간다 
    name: "bucket",
    initialState: {list: ["치킨 먹기", "컴퓨터 게임하기", "여행 가기"]},
    reducers: {
        // reducer 안에는 action 생성 함수가 들어간다.
        // 원래 reducer는 action creator가 만든 action 객체를 받아서 데이터를 처리했지만
        // redux tool kit은 직접 reducer 안에 action creator를 넣고 그에 대한 행동까지 넣어준다.
        // 원래 action creator는 action 객체만 리턴했지만 slice는 행동까지 넣어준다
        loadBucket: (state, action) => {
            return state
        },
        // return {...state, list: [...state.list, action.bucket]};
        // 기존엔 스프레드연산을 이용해서 불변성 유지를 위해 직접 했다
        createBucket: (state, action) => {
            // immer라는 패키지를 redux tool kit이 가지고 있어서
            // 그냥 state의 값을 직접 건드려도 불변성 유지가 된다!
            // js라는 proxy라는 객체를 사용해서 불변성 유지를 한다.
            // action.payload로 데이터를 가져온다!
            state.list = [...state.list, action.payload]
        }
    }
})

// redux와 마찬가지로 reducer와 action creator를 export 해야함
// default로 리듀서 먼저 export
export default bucketSlice.reducer;
// 슬라이스.actions에서 action creator를 export
export const {loadBucket, createBucket} = bucketSlice.actions;

---

 

Store 만들기

• redux 폴더 아래에 configStore.js 파일을 만들고 스토어를 만들어보자.

기존의 Store

import { createStore, combineReducers } from "redux";
//우리가 만든 리덕스 모듈의 리듀서
import bucket from './modules/bucket';
// root 리듀서를 만들어줍니다.
// 나중에 리듀서를 여러개 만들게 되면 여기에 하나씩 추가해주는 거예요!
const rootReducer = combineReducers({ bucket });
// 스토어를 만듭니다.
const store = createStore(rootReducer);

export default store;

Redux Tool Kit으로 만든 Store

• configureStore를 이용해서 reducer를 합쳐서 store를 만든다.

redux/configStore.js

// redux tool kit으로 스토어 만들기
// create store 대신 configStore 만들기
import {configureStore} from "@reduxjs/toolkit";
import bucketReducer from "./modules/bucketSlice";
// slice에서 리듀서를 불러와서 넣어줌
const store = configureStore({reducer: {
    bucket: bucketReducer
}});
export default store;

---

리덕스와 리액트 프로젝트 연결하기

• 위의 과정처럼 store를 만들었으면 리액트 프로젝트와 연결을 해야 한다.
• index.js에서 연결할 스토어를 불러오고 리액트 프로젝트에 리덕스를 주입해줄 Provider를 불러와야 한다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 리액트 프로젝트에 리덕스를 주입해줄 프로바이더를 불러옴!
import { Provider } from "react-redux";
// 연결할 스토어.
import store from "./redux/configStore";

ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById("root")
);

reportWebVitals();

---

리덕스 데이터 사용하기

useSelector()

• 리덕스 스토어의 데이터(=state를) 조회할 수 있다.
• 리덕스 모듈 리듀서에서 마지막으로 리턴한 state를 가져온다!!
  • 리듀서에서 default로 return한 값을 가져온다!!
• 사용하기 위해서는 "react-redux"의 useSelector를 import 해서 사용해야 한다.
• 사용법은 아래와 같다.

const [변수명] = useSelector(state => [리덕스 스토어 state]);

useDispatch()

• 리덕스 모듈에서 생성한 action을 발생시킬 수 있다.
• 사용하기 위해서는 내가 만든 리덕스 모듈의 ActionCreator와 "react-redux"의 useDispatch를 import 해야 한다!
• useDispatch를 "react-redux"에서 import 한 후에 useDispatch()를 변수에 할당하고 할당한 변수의 인자에 내가 만든 리덕스 모듈의 ActionCreator를 넣어주면 된다.

const dispatch = useDispatch();

...

const stateChange = () =>{
    dispatch([ActionCreator]);
}

예시

App.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";
// action creator를 불러옴
import { createBucket } from "./redux/modules/bucketSlice";
import { useEffect } from "react";

const App = () => {
  //const [변수명] = useSelector(state => state.[리덕스 state]);
  //store에 넣어준 리듀서 bucket의 리턴 값에서 key가 list인 값을 가져옴
  const bucket_list = useSelector(state => state.bucket.list);
  const dispatch = useDispatch();

  useEffect(() => { console.log(bucket_list) }, [])

  return (
    <div>
      <button onClick={() => { dispatch(createBucket("피자 먹기")) }}>state 추가</button>
      {bucket_list.map((item, idx) => {
        return (
          <div key={idx}>
            {item}
          </div>
        )
      })}
    </div>
  )
}

export default App;