이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.
⚛️ 기본 환경: IDE: VS code, Language: React
Redux 사용법
1. createSlice 선언
: initialState, reducer 함수의 객체, slice의 이름을 받아서 reducer와 state에 해당하는 action 생성자와 action type을 자동으로 생성하는 함수
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import { createSlice } from "@reduxjs/toolkit";
const uiSlice = createSlice({
name: 'ui',
initialState: {cartIsVisible: false},
reducers: {
toggle(state){
state.cartIsVisible = !state.cartIsVisible;
}
},
});
export const uiActions = uiSlice.actions;
export default uiSlice;
|
|
2. consigureStore에 reducer 전달
: reducer 매개변수를 통해 루트 리듀서를 지정할 수 있으며, 여러 개의 리듀서를 조합하여 사용할 수 있음
* reducer: 이전 상태와 액션을 받아와서 새로운 상태를 반환, Redux 애플리케이션에서 상태의 변화는 액션을 디스패치하면 리듀서를 통해 이루어짐
|
|
import { configureStore } from '@reduxjs/toolkit';
import uiSlice from './ui-slice';
const store = configureStore({
reducer: {ui: uiSlice.reducer}
});
export default store;
|
|
3. 전체 Application에 redux store 공유
|
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import store from './store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>);
|
|
- Provider: 하위 컴포넌트인 App 컴포넌트와 그 아래에 있는 모든 컴포넌트에 Redux 스토어를 제공
- store: Redux 스토어 객체, Provider 컴포넌트의 store prop으로 전달되어 모든 컴포넌트에 공유됨
4. useDispatch를 통한 action 전달
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import classes from './CartButton.module.css';
import {uiActions} from '../../store/ui-slice'
import { useDispatch } from 'react-redux';
const CartButton = (props) => {
const dispatch = useDispatch();
const toggleCartHandler = () => {
dispatch(uiActions.toggle());
};
return (
<button className={classes.button} onClick={toggleCartHandler}>
<span>My Cart</span>
<span className={classes.badge}>1</span>
</button>
);
};
export default CartButton;
|
|
- click 이벤트에 toggle 핸들러를 추가
- useDispatch: 생성한 action을 작동시킴
- uiActions.toggle(): Redux 액션을 반환하는 액션 생성자 함수
[정리]
버튼 클릭
→ dispatch(uiActions.toggle()) 호출
→ Redux 스토어에 uiActions.toggle()이 반환한 액션 객체를 디스패치
→ Redux 스토어는 전달받은 액션 객체의 type 속성*을 기반으로 어떤 리듀서를 호출할지 결정하여 리듀서에게 액션 객체와 현재의 상태를 전달
* createSlice.actions을 사용하면 type 속성을 unique identifier로 자동 생성
→ 리듀서는 전달받은 액션의 타입을 확인하여 어떤 작업을 수행할지 결정
5. useSelector를 통한 Redux 상태 객체에서 특정 속성을 선택하여 반환하여 조건부 화면 반환 구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
import { useSelector } from 'react-redux';
import Cart from './components/Cart/Cart';
import Layout from './components/Layout/Layout';
import Products from './components/Shop/Products';
function App() {
const showCart = useSelector((state) => state.ui.cartIsVisible);
return (
<Layout>
{showCart && <Cart />}
<Products />
</Layout>
);
}
export default App;
|
|
* 여기서는 Redux 저장소에서 ui의 cartIsVisible 값을 선택하여 반환
ui = redux 저장소의 uiSlice.reducer(=새로운 상태를 반환하는 함수)
ui.cartIsVisible = uiSlice.reducer를 통해 cartIsVisible의 기존 state를 받아 신규 state를 반환
결과
Redux를 활용한 toggleBtn 동작 구현
참고 자료
createSlice | Redux Toolkit
redux-toolkit.js.org