redux이론1. 기본

목차

1. Redux란?
2. Redux 사용의 장점
3. Redux의 3가지 기본 원칙
4. Redux의 두가지 유형

---

 

 

 

리덕스의 사용법은 context API와 비슷하다.

근데 왜 리덕스를 많이쓸까?

바로 비동기처리 때문이다.

리덕스에는 미들웨어 존재하며,

리듀서가 state 반환 전 미들웨어에 먼저 들어가며 state를 바꿀 수 있는 내용을 미들웨어에서 결정한다.

 

 

그렇다면, 이번 게시글에서는 Redux 기본 개념에 대해서 알아보자

 

 

 

 

 

1. Redux란?

• JS 앱을 위한 예측 가능한 state 컨테이너
• 객체

const redux = require('redux')
console.log(redux)

// {
// __DO_NOT_USE__ActionTypes: {
//     INIT: '@@redux/INITz.m.5.d.a.h.r',
//     REPLACE: '@@redux/REPLACEu.z.0.z.x.i',
//     PROBE_UNKNOWN_ACTION: [Function: PROBE_UNKNOWN_ACTION]
// },
// applyMiddleware: [Function: applyMiddleware],
// bindActionCreators: [Function: bindActionCreators],
// combineReducers: [Function: combineReducers],
// compose: [Function: compose],
// createStore: [Function: createStore],
// legacy_createStore: [Function: createStore]
// }

 

 

2. Redux 사용의 장점

2-1. 예측 가능성

 

아래와 같은 앱을 작성할 수 있게 함

• 일관적으로 동작하는 앱
• 클라이언트, 서버 등 각각의 다른 환경에서 동작하는 앱
• 테스트하고 쉬운 앱

2-2. 중앙화

• 앱의 state와 논리를 중앙화함으로서 실행/미실행/재실행, 상태(state) 지속성과 같은 강력한 가능성을 제공

 

2-3. 디버그 가능성

• Redux의 devTools는 언제, 어디서, 왜, 어떻게 상태 변경이 이루어졌는 지 등의 추적을 용이하게 함

 

2-4. 유연성

• 다양한 라이브러리와 사용 가능

 

3. Redux의 기본 원칙

3-1. Rexdux 3가지 기본 원칙

1. 앱의 모든 state 는 하나의 저장소 안에 하나의 객체 트리 구조로 저장
2. state는 읽기 전용
3. state의 변화는 순수함수로 작성되어야 함

 

3-2. state는 하나의 저장소 안에 하나의 객체 트리 구조로 저장

• 범용적인 앱(universal application, 하나의 코드 베이스로 다양한 환경에서 실행 가능한 코드) 생성 용이
• 서버로부터 가져온 상태는 시리얼라이즈되거나(serialized) 수화되어(hydrated) 전달되며 클라이언트에서 추가적인 코딩 없이도 사용 가능
• 또한 하나의 상태 트리만을 가지고 있기 때문에 디버깅에도 용이
• 빠른 개발 사이클을 위해 개발중인 애플리케이션의 상태를 저장가
• 하나의 상태 트리만을 가지고 있기 때문에 이전에는 굉장히 구현하기 어려웠던 기능인 실행취소/다시실행(undo/redo)을 손쉽게 구현 가능

 

3-3. state는 읽기 전용

• state를 변화시키기 위한 유일한 방법은 action 객체 전달
• 모든 state 변화는 중앙에서 관리되며, 모든 action은 엄격한 순서에 의해 순차적으로 실행

 

 

3-4. state의 변화는 순수함수로 작성

• 순수 reducer를 작성함으로써 action에 의해 상태 트리 변화를 지정 가능
• reduces는 이전 state와 action을 받아 다음 state를 반환하는 순수함수이므로 이전 state를 변경하는 것이 아닌 새로운 state 객체를 생성해서 반환

 

 

4. Redux의 두가지 유형

4-1. saga

• 규격이 있어서 어렵게 구현되어 있으나 안정적

 

4-2. thunk

• 범용적

 

5. 리덕스 디자인 패턴

리덕스의 논리는 궁극적으로 하나의 함수로 귀결된다.

그 하나의 함수는 바로 새로운 state를 반환하는 리듀싱 함수인 reducer.

 

그리고 이러한 논리는 바로 dispatch호출을 통해

action이라는 객체를 reducer에게 전달함로써 가능해진다.

 

리덕스의 저장소인 store는 작성된 로직을 호출하여

현재 상태트리와 설명객체를 전달하고 작성 로직함수(=reducer)는 새로운 state 트리를 반환한다.

이후 리덕스 저장소는 구독자에게 state 변화를 알린다.