[ReactJS_Complete] Using Redux

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

Redux 사용법

1. createSlice 선언

: initialState, reducer 함수의 객체, slice의 이름을 받아서 reducer와 state에 해당하는 action 생성자와 action type을 자동으로 생성하는 함수

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 전달

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 상태 객체에서 특정 속성을 선택하여 반환하여 조건부 화면 반환 구현

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