[Redux] Redux란?

 

오늘은 Redux에 대해 알아보겠습니다.  :)

 

 

https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts

 

 

[ Redux ] 

Redux(리덕스)란 JavaScript 상태관리 라이브러리입니다. 

 

여기서 말하는 상태(State)란 간단하게 말하자면 데이터를 말합니다. 덧붙이자면 상태는 컴포넌트 내부에서 사용하는 데이터라고 할 수 있습니다. 

 

요즘은 웹 사이트를 구성할 때, 사용자에게 보이는 UI들을 하나의 파일로 몽땅 구현하지 않고, 요소들을 컴포넌트 단위로 구성하여 조합하는 식으로 만듭니다.

 

[ Redux의 원칙 ]

1. Single source of truth 

- 동일한 데이터는 항상 같은 곳에서 가져옵니다.

- 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미입니다.

 

2. State is read-only

- 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능합니다. 

- 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있습니다.

 

3. Changes are made with pure functions 

- 변경은 순수함수로만 가능합니다.

- 이는 리듀서와 연관되는 개념입니다.

- Store(스토어) - Action(액션) - Reducer(리듀서) 

 

 

📌 Store, Action, Reducer의 의미와 특징 

 

 

 

💡 Store (스토어) 

 

Store는 상태가 관리되는 하나의 공간입니다. 

 

- 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담습니다.

- 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근합니다. 

 

 

💡 Action (액션) 

 

- Action은 앱에서 스토어에 운반할 데이터를 말합니다. ( 주문서와 같습니다. )

- Action은 자바스크립트 객체 형식으로 되어 있습니다. 

 

 

💡 Reducer (리듀서) 

 

- Action을 Store에 바로 전달하는 것이 아닌, Reducer에 전달해야 합니다.

- Reducer가 주문을 보고 Store의 상태를 업데이트하는 것입니다.

- Action을 Reducer에 전달하기 위해서는 dispatch() 메서드를 사용해야 합니다. 

 

 

💡 Dispatch (디스패치) 

 

- Dispatch는 store의 내장 함수 중 하나로, action을 발생시킵니다. 

- action을 파라미터로 전달하고 reducer를 호출합니다.

 

 

💡 Subscribe (구독) 

 

- Subscribe는 store의 내장 함수 중 하나로, 특정 함수를 전달해주면 action이 dispatch 되었을 때마다 전달된 함수가 호출됩니다. 

 

 

Action 객체가 dispatch() 메서드에 전달  -> dispatch()를 통해 Reducer를 호출 ->Reducer는 새로운 Store를 생성

 

Redux 공식 문서

 

[ Redux의 장점 ]

• 순수 함수를 사용해 상태를 예측 가능하게 만듭니다
• 유지보수에 용이합니다
• redux dev tool이 있어 디버깅에 유리합니다
• 비동기를 지원하는 Redux Saga, Redux Thunk 등 다양한 미들웨어가 존재합니다.

 

👨‍💻 리덕스는 언제 쓰는게 좋을까?

그렇다면 리덕스는 언제 쓰는게 좋을까요?

 

• 전역 상태가 필요하다고 느껴질 때
• 상태들이 자주 업데이트 될 때
• 상태를 업데이트 하는 로직이 복잡할 때
• 앱이 크고 많은 사람들에 의해 코드가 관리될 때
• 상태가 업데이트되는 시점을 관찰할 필요가 있을 때

[ React 없이 쓰는 Redux ]

 

💡Redux 설치 방법

 

npm install redux

 

 

const redux = require("redux");
 
const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
    };
  }
 
  return state;
};
 
const store = redux.createStore(counterReducer);
 
console.log(store.getState());
 
const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState);
};
 
store.subscribe(counterSubscriber);
 
store.dispatch({ type: "increment" });
store.dispatch({ type: "decrement" });
 

 

 

결과