Redux 사용법

Redux의 핵심 개념

1. Store : 애플리케이션의 전역 상태를 보관
2. Action : 상태를 변경하기 위한 "의도"를 나타내는 객체
3. Reducer : Action에 따라 상태를 업데이트하는 순수 함수
4. Dispatch : Aciton을 Store로 보내는 메서드
5. Selector : 상태를 조회하기 위한 함수

 

Redux 사용법

1. Redux 설치

npm install @reduxjs/toolkit react-redux

 

@reduxjs/toolkit은 Redux를 쉽게 사용할 수 있도록 도와주는 공식 도구

 

2. 간단한 예제

 

Store 설정

// src/store/counterSlice.ts

import { createSlice } form '@reduxjs/toolkit';

const counterSlice = createSlice({
 name : 'counter',
 initialState : { value: 0 },
 reducers: {
  increment: (state) => {
   state.value += 1;
  },
  decrement: (state) => {
   state.value -= 1;
  },
  incrementByAmount: (state, action) => {
   state.value += aciton.payload;
  },
 },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

 

Store 구성

// src/store/index.ts

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
 reducer: {
  counter: counterReducer,
 },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

 

React와 연결

// src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
);

 

컴포넌트에서 사용

// src/components/Counter.tsx

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from '../store';
import { increment, decrement, incrementByAmount } from '../store/counterSlice';

const Counter = () => {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch<AppDispatch>();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  );
};

export default Counter;

 

 

---

 

실제로 적용해보기는 다음에 ..!