[TIL] 22.05.19 프리온보딩 Day 13 - Redux Toolkit

Redux Toolkit

 

리덕스를 사용하는 구조에서는 전역 상태를 전부 하나의 저장소(store) 안에 있는 객체 트리에 저장하며, 상태를 변경하는 것은 어떤 일이 일어날 지를 서술하는 객체인 액션(action)을 내보내는(dispatch) 것이 유일한 방법이다.

그리고 액션이 전체 애플리케이션의 상태를 어떻게 변경할 지 명시하기 위해서는 리듀서(reducer)의 작성이 필요하다.

 

리듀서는 변화를 일으키는 함수로써, 전달받은 액션을 가지고 새로운 상태를 만들어 스토어에 전달한다. 이 모든 설계는 데이터가 단방향으로 흐른다는 전제 하에 데이터의 일관성을 향상시키고 버그 발생 원인을 더 쉽게 파악하려는 의도에서 출발했다.

 

대표적으로 언급되는 리덕스의 문제는 1. 스토어 환경 설정이 복잡하다. 2. 유용하게 사용하려면 많은 패키지를 추가해야 한다. 3. 보일러플레이트를 너무 많이 요구한다. 였다.

 

RTK는 리덕스를 더 쉽게 사용하기 위해 세상에 등장했다. (두둥 등장!🎊)

이름 그대로 리덕스를 위한 도구 모음집!

 

리덕스 툴킷의 핵심은 기존 리덕스의 복잡함을 낮추고 사용성을 높이는 것이다!

 

 

아래는 간단한 로그인 실습코드!~!

 

---

기본 세팅

일단 준비물 세가지를 설치해준다.

yarn add redux react-redux @reduxjs/toolkit
# 또는 npm
npm install redux react-redux @reduxjs/toolkit

폴더 구조

src
|-- components
|   |-- Login.js
|   |-- Profile.js
|— redux
|   |-- store.js
|   |-- user.js

store.js

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

export default configureStore({
  reducer: {},
})

configureStore: 스토어를 구성하는 함수.

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './redux/store';
import { Provider } from 'react-redux';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Provider로 app을 감싸주고, store라는 파라미터를 전달해주면 기본 세팅은 끝!

 

리듀서 만들기

user.js

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

export const userSlice = createSlice({
    name: "user",
    initialState: { value: {name: "", age: 0, email: ""}},
    reducers: {
        login: (state, action) => {
            state.value = action.payload
        },
    },
});

export default userSlice.reducer;

createSlice에 선언된 슬라이스 이름을 따라 리듀서와 그것에 상응하는 액션 생성자와 액션 타입을 자동으로 생성한다.

 

store.js

import userReducer from './user'

// -----

reducer:{
  user: userReducer
}

reducer에 위 내용 추가하기.

 

Profile.js

import { useSelector } from 'react-redux'

function Profile() {
    const user = useSelector((state) => state.user.value)
    return (
        <div>
            <h1>Profile Page</h1>
            <p> Name : {user.name} </p>
            <p> Age : {user.age} </p>
            <p> Email : {user.email} </p>
        </div>
    );
}

export default Profile

useSelector는 스토어에서 값을 조회한다.

로그인 기능 넣기

user.js

// export default 윗 줄에 작성
export const { login } = userSlice.actions

login.js

import { useDispatch } from 'react-redux';
import { login } from '../redux/user';

function Login() {
  const dispatch = useDispatch()
  return (
    <div>
      <button onClick={() => {
        dispatch(login({name: "내 이름", age: 20, email: "email@gmail.com"}))
      }}>Login</button>
    </div>
  );
}

 

---

참고

http://blog.hwahae.co.kr/all/tech/tech-tech/6946/

https://velog.io/@mael1657/Redux-toolkit으로-상태관리하기