Redux

Redux(리덕스)란?

Redux(리덕스)는 JavaScript 애플리케이션의 상태 관리를 위한 라이브러리 중 하나다.(React 없이도 사용할 수 있는 상태 관리 라이브러리, 리덕스는 리액트의 하위 라이브러리 개념이 아니다. )

상태 관리

---

Redux의 3가지 원칙

1. Single source of truth :
   Redux는 단방향 데이터 흐름을 따른다. 즉, 애플리케이션의 상태는 한 곳(store)에서 관리된다.
2. State is read-only :
   Redux는 읽기전용이다. 그래서 상태를 변경하려면 액션(Action)을 통해 상태 변경을 요청해야 한다. 그리고 상태 변경 요청에 대한 처리를 담당하는 리듀서(Reducer)가 상태를 변경하고, 변경된 상태를 다시 애플리케이션에 반영한다.
3. Changes are made with pure functions :
   변경은 순수함수로만 가능하다. 상태가 예상 못하는 값으로 변경되는 일이 없도록 순수함수로 작성되어야하는 Reducer와 연결되는 원칙이다.

@HamidReza Alizadeh.   리덕스 없을때, 있을때  초록 컴포넌트의 바뀌는 방법

이러한 방식은 store에서 관리되기에 애플리케이션의 상태 변화를 추적하기 쉽고, 예측 가능한 코드를 작성할 수 있도록 한다. 또한, 여러 컴포넌트에서 코드의 중복을 줄이고, 유지보수성을 높일 수 있다.

---

Redux의 구조

(Redux에서 사용하는 Action, Dispatcher, Reducer 그리고 Store의 의미와 특징) 아래와 같은 구조를 가지고있다.

Action

• 애플리케이션에서 일어난 이벤트를 나타내는 일종의 객체
• 반드시 type 속성을 가지며, 상태 변경을 위한 데이터를 담을 수도 있음
• 액션은 상태를 변경하기 위한 유일한 방법으로, 상태 변경을 발생시키는 원인이 됨

Dispatcher

• 액션을 발생시키는 함수
• store의 dispatch() 메소드를 사용하여 액션 객체를 전달하면, 해당 액션을 처리할 수 있는 reducer가 호출됨

Reducer

• 액션에 따라 상태를 변경하는 함수
• 이전 상태와 액션 객체를 인자로 받아 새로운 상태를 반환함
• reducer는 이전 상태를 변경하지 않으며, 항상 새로운 상태 객체를 반환함

Store

• 전체 애플리케이션의 상태를 저장하는 객체
• 애플리케이션 상태를 변경하는 유일한 방법은 액션을 dispatch하는 것
• store는 reducer를 통해 상태를 변경하고, 변경된 상태를 React 컴포넌트에 전달함

---

더하기, 빼기 버튼 기능 구현

React와 Redux를 사용하여 간단한 더하기, 빼기 버튼 기능을 구현하는 예시

1. 필요한 패키지 설치하기

npm install react redux react-redux

2. Redux store 생성하기

Redux store는 전체 애플리케이션의 상태를 담고 있는 객체다.

createStore 함수를 사용하여 store를 생성.

import { createStore } from 'redux';

const initialState = { count: 0 };

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

const store = createStore(counterReducer);

3. Redux store를 React 애플리케이션에 연결하기

React Redux를 사용하여 Redux store를 React 컴포넌트에 연결시킨다.

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

const store = createStore(counterReducer);

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

 

4. Redux 액션과 액션 생성자 만들기

Redux 액션은 상태 변화를 일으키기 위한 객체고 액션 생성자는 액션을 생성하는 함수다.

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

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

5. Redux reducer 수정하기

Redux reducer는 액션에 따라 상태를 변경하는 함수고 액션 객체에 따라 상태를 변경시킨다.

const initialState = { count: 0 };

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

export default counterReducer;

6. React 컴포넌트 만들기

Redux store에서 상태를 가져와서 React 컴포넌트에서 사용한다.

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())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default App;

---

참고 동영상

 

데브리 : 리액트 리덕스 (Redux) 튜토리얼 순한맛

리액트 리덕스 (Redux) 튜토리얼 순한맛 1/2

리액트 리덕스 (Redux) 튜토리얼 순한맛 2/2

코딩애플 : React 입문자들이 알아야할 Redux 쉽게설명 (8분컷)