[Redux] Redux-toolkit으로 상태관리 하기

🚀 Redux-toolkit

• 리액트에서는 반드시 전역 상태 관리라는 것을 해야한다. 한두 번만 props로 넘기면 괜찮지만 안 그럴 때도 많으니,,
• 보통 많이 사용하는 게 Redux, MobX, ContextAPI, recoil, zustand인데 나는 Redux로 해보기로 결정!
• 가장 사용자가 많기도 하고 그럼 정보도 더 많을거니까 ㅎㅎ

📚 Redux와 Redux-toolkit의 차이

• Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷
• Redux-Toolkit을 사용하면 Redux의 문제점 해결
  •  Redux 스토어 구성이 너무 복잡하다.
  •  Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다.
  •  Redux에는 너무 많은 상용구 코드가 필요하다.

📔 Redux-Toolkit이 제공하는 것

• configureStore : 간단하게 Store를 만들 수 있음
• createReducer : switch문 작성하는 것 대신 간단하게 Reducer를 만들 수 있음
• createAction : Reducer에 작성한 것들을 기반으로 Action들을 만들어 줌
• createSlice : reducer의 이름, 초기상태, reducers 등을 간편하게 만들 수 있도록 도와줌
• createAsyncThunk : createAction을 비동기로 만들 수 있도록 도와줌
• createSelector : Store에서 상태를 효율적으로 저장하도록 도움

1️⃣ app폴더에 redux 폴더 만들고 store.js 만들기

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

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

• configureStore에서 모든 state를 관리
• reducer에 상태관리할 것들 저장

2️⃣ index.js에 Provider로 감싸기

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();

 

3️⃣ 리듀서 만들기

- redux/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;

• createReducer와 createAction이 하던 일을 같이 함
• 사용할 리듀서의 이름 정하고 createSlice로 지정
• name: 리듀서 이름 뭘로 할지 정함
• initialState: 들어갈 데이터의 초깃값 잡아줌
• reducers: 상태가 변하면 어떻게 실행될지 정함
• state: 지정해놓은 초기값의 value를 가져오는 역할
• actions: payload랑 type이 있음 --> 바꾸고 싶은 데이터를 원하는 곳에다가 넘겨줌

 

- app/redux/store.js ---> 스토어에 저장 

import { configureStore } from '@reduxjs/toolkit'
import userReducer from './user'

export default configureStore({
    reducer:{
        user: userReducer
    }
})

• 스토어에 저장해야 작동함

4️⃣ 실행되는지 확인

import { useSelector } from 'react-redux'

const user = useSelector((state) => state.user.value)

• useSelector를 이용해서 만든 리듀서에 접근
• user라고 이름 지어준 리듀서에 있는 state에 접근
• user 리듀서에서 초깃값을 value로 지정 -> user에 있는 value를 가져올 것
• --> state.리듀서 이름.초깃값