[redux] react에서 redux-toolkit 사용

개인프로젝트를 진행할 때도 계속 props로 연결-연결해서 넘겨야하는 것에 대해 귀찮음과 .. 그렇게 계속 자식으로 넘기다보니

연관되지 않은 부모 컴포넌트들까지 리랜더링이 되어야하는 것에 대해 문제를 느끼고 있는 와중

생활코딩 리덕스 강의를 통해 새로운 상태 관리 방법을 알게 되고, 이어 리덕스 툴킷까지 알게되었다.

 

redux

- js 상태 관리 라이브러리 

- store라는 하나뿐인 데이터 공간

- action을 통해서 상태 변경

- 변경은 순수 함수로만 가능 

 

 

🌟 store

상태가 관리되는 하나의 공간

 

🌟 action

store에 운반할 데이터 

 

🌟 reducer

action을 reducer가 받아 store의 상태를 업데이트

 

🌟 dispatch

store의 내장함수 중 하나로 action을 발생시킴

action을 파라미터로 전달하고 reducer를 호출 

 

📍 action 객체가 dispatch()를 통해 reducer호출 ➡️ reducer는 새로운 store를 생성 

 

 

redux-toolkit 

리덕스 사용을 더 쉽게 이용하기 위한 도구 & 전체적인 코드량을 줄임

 

사용

npm install @reduxjs/toolkit

 

 

store.js

import { configureStore } from "@reduxjs/toolkit";
import dateReducer from "./dateSlice";

const store = configureStore({
  reducer: {
    date: dateReducer,
  },
});

export default store;

 

configureStore()를 통해 store생성

 

 

dateSlice.js

import { createSlice } from "@reduxjs/toolkit";
import dayjs from "dayjs";

const dateSlice = createSlice({
  name: "date",
  initialState: {
    date: dayjs().format("YYYY-MM-DD"),
  },
  reducers: { // reducers 's' 붙는거 주의 
    setDate: (state, action) => {
      state.date = action.payload;
      // 자동 생성되는 actionCreate를 사용한다고 하면 payload로 받아야함
      // 불변성 유지할 필요없
    },
    resetDate: (state) => {
      state.date = dayjs().format("YYYY-MM-DD");
    },
  },
});

export default dateSlice.reducer;
export const { setDate, resetDate } = dateSlice.actions;

 

 

상태 사용

const date = useSelector((state) => state.date.date); // useSelector를 통해 가져옴 state.(name).(value)

const dispatch = useDispatch();

// dispatch(액션이름(newState)) 처럼 아래 사용

<StaticDatePicker value={dayjs(date)} onChange={(e) => dispatch(setDate(e.format("YYYY-MM-DD")))} />