Redux

- 어플리케이션 상태(State)를 쉽게 관리하기 위한 프레임워크(오픈 소스 JavaScript 라이브러리)

- state 관리가 용이

 

 

Redux의 요소

1. Action

- 상태를 변경(state update) 하기 위해 발생

- 객체 형식

{

     type: "EXAMPLE_TYPE"

     payload: amount

}

2. Action Creator

- Action을 생성하는 함수

- Action을 반환하는 함수

 

EX) 

// withdrawMoney 함수 자체가 Action Creator
const withdrawMoney = (param) => {

	// 이 리턴 안에 들어있는게 Action
	return {
    	type: WITHDRAW_MONEY,
        payload: amount
    }
}

3. Dispatch

- store의 내장 함수 중 하나

- Reducer[state값을 변경시키는 함수]에게 어떤 action이 발생했는지 알리는 함수

- 함수 형태 : dispatch(action), dispatch(ActionCreator(param))

 

4. Store

- 하나의 App에 단 하나의 Store만 존재

- state, Reducer 및 기타 내장 함수 존재

 

5. State

- 데이터 및 UI 상태 등 어플리케이션을 유지하기 위한 정보

- State 값의 변경 => View의 변경

 

6. Reducer

- state에 변화를 일으키는 함수

- input으로 state, action을 받고 output으로 변화된 state 를 리턴한다. 

 

7. Connect

- React Native 세계관과 Redux 세계관의 연결 함수

- Store 안에 state -> connect -> component 안에 props

      => props는 불변이니까 state 변경 -> 새로운 component 생성
- mapStateToProps: Store 가 가진 state를 props에 엮음

- mapDispatchToProps: dispatch(reducer에 action을 알리는 함수)를 props에 엮음

 

Redux의 3원칙

1. Single Source of Truth (신뢰 가능한 유일한 정보원)

- 어플리케이션의 모든 state는 단일 store에서 관리

 

2. State in Read-Only ( state는 읽기 전용 )

- state의 변경은 반드시 action을 통해서

 

3. Changes are Made with Pure Functions(변경은 순수함수를 통해서만)

    => Reducer는 순수함수로 정의

          => 인수 변경 x, API 호출 x, 네트워크 요청 x, 순수함수가 아닌 함수 호출 X

 

 

 

 

 

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EC%A4%91%EA%B8%89/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Intermediate - 인프런 | 강의

인프런 iOS/Android 앱 개발을 위한 실전 React Native - Intermediate 수업을 정리했습니다.