Redux (Toolkit) - 1. 동기 작업 처리
#state 관리 #reducers
Redux는 복잡하다. 사람들이 혼란스러워 하는 상황에서
이를 쉽게(표준적으로, 일반적으로) 사용할 수 있게 도와주는 도구가 등장하는데,
그것이 바로 Redux Toolkit이다.
목차
STEP1. 기본 설정
STEP1-1. 기초적인 설정 #기반 공사 // store.js
STEP1-2. 추가적인 설정 #추가 공사 #구체적인 기능들 // counterSlice.js
STEP2. 프로젝트에 Redux Toolkit을 쓸 수 있는 분위기 만들기 #환경 설정 // index.js
STEP3. 실제로 사용하기 #at 원하는 컴포넌트 // Counter.js
상태를 관리하기 위해 store를 만든다. 그 속에 각각의 기능별로 slice들을 만들어준다.
기초적인(기반이 되는) 설정은 'store.js'에 적힌다. 여러 추가 설정들을 모아놓는 곳이다.
그 추가적인 설정은 '어쩌구Slice.js'에 적혀있는데, 이는 기능에 따라 분류된 것이다.
지금부턴 counter 기능을 가진 예제를 통해 살펴본다. 구성은 다음과 같다.
app
- store.js // STEP1-1. 기반 공사
features
counter
- counterSlice.js // STEP1-2. 추가 공사
- Counter.js // STEP3. 실제 사용처
-index.js // STEP2. 환경설정
STEP1. 기본 설정
STEP1-1. 기초적인 설정 #기반 공사
하나의 store에는 여러 기능을 가진 slice들이 들어있다. 어떤 slice들이 들어있는지를 store.js에 적어놓은 것이다. 현재는 기능이 counter 하나 밖에 없으니, 한줄만 적혀있다. 다른 기능들이 더 생겨난다면, 여러줄이 추가될 것이다.
// store.js
import { configureStore } from "@reduxjs/toolkit";
import { counterSlice } from '../features/counter/counterSlice';
export const store = configureStore({
reducer: {
counter: counterSlice.reducer, // counterSlice.js에 정의되어 있는 것들
}
})
STEP1-2. 추가적인 설정 #추가 공사 #구체적인 기능들
이젠 상태(state)를 변경하는 기능을 구체적으로 작성할 때이다. 이는 counterSlice.js에 적혀있다.
reducers를 공구함이라 하면 그 속에
망치(increment), 스패너(incrementByAmount)과 같은
'상태(state)를 변경해주는 함수'인 reducer가 여러개 들어있다.
// counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const counterSlice = createSlice({
name: 'counter',
initialState : { count: 0 }
// 동기 작업 처리
reducers: {
increment: (state) => {
state.count += 1; // 상태(state)를 바꾸는 구체적인 로직 #망치질 하는 방법
},
incrementByAmount: (state, action) => {
state.count += action.payload; // 상태(state)를 바꾸는 구체적인 로직 #스패너질 하는 방법
}
},
// 비동기 작업 처리 :
extrareducers: {
}
});
export const { increment, incrementByAmount } = counterSlice.actions; // 상태 변경함수 출동준비!
STEP2. 프로젝트에 Redux Toolkit을 쓸 수 있는 분위기 만들기 #환경 설정
// index.js
import { Provider } from 'react-redux';
import { store } from './app/store';
ReactDom.render(
<Provider store={store}>
<MyCompoent />
</Provider>
);
STEP3. 실제로 사용하기 #at 원하는 컴포넌트
이제 실제로 망치와 스패너를 원하는 곳에서 사용해보자.
우선 useSelector()를 통해 현재의 상태(state)값을 불러온다. #현재 공사 진행상태 파악
dispatch(리듀서 함수)를 사용해 상태(state)값에 변화를 일으킨다. #망치, 스패너 사용하기
참고) 리듀서 함수에 인자를 넣어 전달하면, 이는 counterSlice.js에서 payload라는 것이 받게된다. 이를 활용하여 상태(state)를 더 자유롭게 바꿀 수 있게 된다.
// Counter.js
import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, incrementByAmount } from './counterSlice';
const Counter = () => {
const count = useSelector((state) => state.counter.count); // 현재의 상태값 불러오기
const dispatch = useDispatch();
return (
<>
<p>{count}</p>
<button onClick={() => dispatch(increment())}>1씩 증가</button>
<button onClick={() => dispatch(incrementByAmount(5))}>5씩 증가</button>
</>
)
}
export default Counter
