[JS][REACT] 리액트 정리 5 (REDUX)

Redux

- 앱 전체 상태를 쉽게 관리하기 위한 라이브러리

- 많은 개념들이 Flux Pattern에서 차용됨

- 앱 전체의 상태 관리가 필요할 때

- 복잡한 비동기 처리가 있는 상태 관리가 필요할 때

- 앱의 상태가 복잡하고 , 이를 체계적으로 관리하고 싶을 때

- 상태 관리 패턴을 도입하여 여러 개발자와 협업하고 싶을 때 사용

 

핵심 원칙

- Single source of truth -> Store는 단 하나이며 , 모든 앱의 상태는 이곳에 변경됨

- Immutability -> 상태는 오로지 읽을 수만 있고 , 변경하려면 모든 상태가 변경되어야 함

- Pure funtion -> 상태의 변경은 어떠한 사이드 이펙트도 만들지 않아야 함

 

Action

- 상태의 변경을 나타내는 개념

- 어떤 형태든지 상관없으나 , 주로 type과 payload를 포함하는 js 객체

// action
const action = {
	type: '~~~~'
   	payload : {
    	id: 10
    }
}

// action creator
const actionCreator = (id) = > ({
	type: '~~~~'
   	payload : {
    	id: String(id).slice(1)
    }
})

 

Store

- 앱 전체의 상태를 보관하는 곳

- Action에 따라 reducer에서는 새로운 상태를 만들어내며 , Store는 그 상태를 저장

- Store의 상태는 불변하며, 매 액션이 발생할 때 마다 새로운 객체가 만들어짐.

 

Reducer

- Action을 받아 새로운 state를 만듬

- 상태 변경 시 사이드 이펙트가 없어야 함

const reducer= (state, action) => {
	switch(action.type) {
    	case 'namespace/getMyData':
        	const obj= { id: action.payload.id}
            return { ...state, obj}
        default:
        	return state
    }
}

const store= createStore(reducer, initialState)

 

Dispatch

- Action을 redux로 보내는 함수

- dispatch 후에 action은 middleware를 거쳐 reducer에 도달.

 

Selector

- 특정 state조각을 store로부터 가져오는 함수

- store의 state는 raw data를 저장하고 , 계산된 값 등을 selector로 가져오는 등의 패턴을 구사할 때 유용