위 글은 redux in react 글과 연결됩니다.
Redux란?
action이라는 이벤트를 사용하여 애플리케이션 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리
예측 가능한 방식으로만 업데이트 될 수 있도록 상태 관리를 해주는 컨테이너로 전체 애플리케이션에서 사용하는 상태의 중앙 저장소 역할을 한다.
독립적으로도 사용이 가능하고 react와 같이 라이브러리와 연결해서 사용하는 것도 가능하다.
왜 redux를 사용할까?
React만 사용해도 애플리케이션을 개발할 수 있으나, 컴포넌트가 많아지고 구조가 복잡해지면 state를 관리하는 것이 어려워지게 된다.
이전에는 React에서 A와 B 컴포넌트간의 정보를 공유하기 위해서는 A, B 컴포넌트의 부모 컴포넌트가 상태를 관리했음. 그러나 자식이 많아지면서 이러한 상태 관리 기법을 사용하는 것은 너무 복잡함.
→ 그래서 redux를 사용해 전역으로 state를 관리하게 됨
단방향 데이터 흐름인 Flux 패턴
View -> Action -> Reducer(s) -> Store -> View
3가지 원칙 Redux 3-principle
1.
single source of truth (SSOT)
동일한 데이터는 항상 같은 곳에서 가져와야함
2.
state is read-only
state는 읽기만 가능 → action을 통해 state를 변경
3.
changes are made with pure functions
state 변경은 순수함수만 가능하다.
장점
1.
상태를 예측 가능하게 만들어준다
2.
유지보수 용이
3.
디버깅에 유리하다 (action과 state log 기록 시)
4.
테스트를 붙이기 쉽다.
Store
상태가 관리되고 저장되는 오직 하나의 공간
애플리케이션의 상태를 저장하고 읽을 수 있게하고 액션을 보내거나 상태 변솨를 감지할 수 있는 API를 제공한다.
createStore() 메소드를 사용하여 reducer와 연결한다.
첫번째 인자는 Reducer, 두 번째 인자부터는 optional이며 initial state를 받는다. 세 번째 인자는 enhancer를 받는다.
import { createStore } from 'redux';
const store = createStore(rootReducer)
JavaScript
복사
Action
애플리케이션의 상태를 어떻게 변경시킬지 추상화한 표현으로 애플리케이션의 데이터를 운반해주는 역할
자바스크립트 객체로 type 프로퍼티를 꼭 가지고 있어야한다.
{
type: // 대문자로 작성
// 타입만 지정해주면 다른 값들은 자유롭게 작성 가능
payload: "wow"
}
JavaScript
복사
액션 생성함수 Action Creator
action을 생성하는 함수로 파라미터를 받아 action 객체 형태로 만들어준다.
필수적으로 사용하는 것은 아니나 컴포넌트에서 쉽게 action을 발생시키기 위해 사용하며 export 키워드를 붙여 다른 파일에서 불러와 사용한다.
export function addItem(itemId, name) {
return {
type: "ADD_ITEM",
payload: {
itemId,
name
}
}
}
// 화살표 함수로도 작성 가능
export const addItem = (itemId, name) => {
return {
type: "ADD_ITEM",
payload: {
itemId,
name
}
}
}
JavaScript
복사
Dispatch
Action을 전달하는 메소드
reducer를 호출하면 store는 reducer 함수를 실행시켜 새로운 상태를 만들어줌
const dispatch = useDispatch();
dispatch(addItem(1, "food"));
JavaScript
복사
Reducer
(state, action) ⇒ state 형태의 순수 함수로, 현재 state와 action을 참고해 새로운 state를 만들어 반환하는 함수
보통 switch구문을 많이 사용한다. 다른 컨벤션도 ok!
const reducer = (state, action) => {
switch(action.type) {
case "INCREASE":
return state + 1;
case "DECREASE"
return state - 1;
default: // 기존 state를 그대로 반환하도록 작성
return state;
}
}
JavaScript
복사
combineReducers()를 사용해 여러 개의 reducer를 하나로 합칠 수 있음
import { combineReducers } from 'redux';
// reducers 가져오기
import aReducer from './aReducer';
import bReducer from './bReducer';
const rootReducer = combineReducers({
aReducer,
bReducer
})
export default rootReducer
JavaScript
복사
reducers/index.js
redux의 기본개념 overview
redux architecture
action → dispatcher → store → view
action
•
action 정의
•
dispatcher 호출
dispatcher