Redux 설치 및 사용법

Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리로, 특히 React와 함께 사용되어 복잡한 상태를 효율적으로 관리하고 상태 관련 로직을 분리하는 데 도움을 줍니다.

Redux의 핵심 개념은 "스토어(Store)", "액션(Action)", "리듀서(Reducer)"입니다.

https://sumni.tistory.com/67

Redux, Props, State 개념

 

1. Redux 설치

먼저 Redux를 설치합니다. npm 또는 yarn을 사용할 수 있습니다.

npm install redux

 

2. Redux 스토어 생성

Redux 스토어를 생성합니다. 스토어는 애플리케이션의 전역 상태를 저장하는 곳입니다.

// store.js

import { createStore } from 'redux';
import rootReducer from './reducers'; // 리듀서를 import

const store = createStore(rootReducer);

export default store;

*createStore 취소선

@deprecated
We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

 

 @reduxjs/toolkit의 권장사용을 유도하기 위해서 createStore에 취소선이 그인 것으로 아래와 같게 수정함.

 

3. 액션 정의

액션은 스토어로 보내는 데이터 패킷으로, 스토어의 상태를 변경하기 위한 유일한 방법입니다.

// actions.js

export const increment = () => {
  return {
    type: 'INCREMENT',
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT',
  };
};

 

4. 리듀서 생성

리듀서는 액션에 따라 어떻게 상태를 변경할지를 정의합니다.

// reducers.js

const initialState = {
  count: 0,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default rootReducer;

*combineReducers 사용

위 코드는 combineReducers를 사용하지 않고 리듀서를 직접 묶었습니다.

여러 리듀서가 하나의 액션에 응답할 수 있도록 하기 위해서인데 이 패턴이 매우 흔하기 때문에 리덕스는 이를 구현한 유틸리티인 combineReducers를 제공합니다.

 

아래 링크에 combineReducers를 사용한 예제가 있습니다.

https://sumni.tistory.com/236

combineReducers

 

 

5. React 컴포넌트와 Redux 연결

Redux 스토어를 React 컴포넌트와 연결하려면 react-redux 라이브러리를 사용합니다.

// App.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

function App() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

위의 코드에서 useSelector로 상태를 가져오고, useDispatch로 액션을 디스패치할 수 있습니다.

 

6. 애플리케이션 엔트리 포인트에서 스토어 제공

마지막으로, Redux 스토어를 애플리케이션의 엔트리 포인트에서 제공해야 합니다.

// index.js

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

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