Redux(리덕스)

Redux는 상태관리 라이브러리이다. Redux를 사용하면 리액트에서 단방향 데이터 데이터 통신에서 발생되는 단점을 극복할 수 있다.

Redux는 요즘 가장 인기있는 React 뿐만 아니라 다양한 framework에서도 사용할 수 있다. 즉, React에서만 사용가능한 라이브러리가 아니다.

react

redux

store

redux에서는 한 애플리케이션 당 하나의 스토어를 만들게 된다. 스토어 내부에는 현재 앱의 상태와 무엇이 일어날지 작성하는 action, 그리고 action의 type에 따라 상태를 수정하는 reducer가 존재한다.

action

상태에 변화가 필요할때 액션을 사용한다. 상태 저장소인 store에 데이터를 보내는 방법이다. 새로운 상태 값을 dispatch를 통해 전달한다. 

action 객체에는 type 필드를 필수적으로 가지고 있어야하며 그외의 값은 자유롭게 작성할 수 있다.

action에 작성하는 type은 문자열 상수로 정의하며 중복되면 안된다.

action creater

액션 생성함수라고하며 액션을 만드는 함수이다. 파라미터를 받아와서 액션 객체 형태를 만들어준다.

reducer

state 값을 초기화, 수정할때 사용한다. 즉, reducer는 변화를 일으키는 함수이다. reducer는 두가지의 파라미터로 state와 action을 받아 온다. 

action을 통해 어떠한 행동을 정의하면 그 결과 상태를 초기화, 수정하는 함수이다. 일반적으로 매개변수로 기존의 state값과 새로운 action값을 받아 새로운 상태를 만들어서 반환한다.

dispatch

dispatch는 store의 내장함수 중 하나이며 action을 발생시키는 함수이다.

값을 초기화, 수정할때 사용하는 reducer 함수에 action 값으로 들어갈 새로운 상태 값을 전달하는 메서드이다.

 dispatch(action) 과 같이 dispatch 함수에 액션을 파라미터로 전달한다.

subscribe

store의 상태가 변경 될 때마다 render 함수를 호출해줘야 한다. 그러기 위해서는 store를 구독해줘야 한다. 구독할 때에는 store의 내장함수 subscribe를 사용한다.

Redux 사용시 실수했던부분

reducer 함수의 인자로 state와 action이 들어온다. state로 들어오는 값은 이전의 state 값이다.

해당 state값은 불변성을 유지하면서 값을 업데이트 해줘야 한다. 그이유는 redux의 기능중 redo, undo 기능을 사용하기 위해서이다.

또한 초기에 state이 정의되어있지 않기때문에 초기 state 값이 undefined로 출력될 수 있으므로 

조건문 또는 default parameter를 사용하여 state를 초기화 해주어야 한다.

reducer함수에서 조건문을 사용하여 return하는 값이 초기 state의 값으로 저장된다.

reducer함수를 통한 state값 초기화

마지막으로 

리덕스의 특징

1. Single Source of Truth - 1개의 상태

2. 1개의 state에 모든 데이터를 넣는다.

3. 인가된 담당자(특정 함수)를 통해서만 값을 수정한다. (reducer, dispatcher)

4. 데이터를 가져 갈 때도, 함부로 가져가지 못한다. - 데이터를 외부에서 직접적으로 제어 할 수 없다.
    - 예기치 않게, state가 바뀌는 것을 사전에 차단하여서, 예측 가능하도록 한다.

5. 각각의 애플리케이션은 서로에게 신경 쓸 필요 없이 자기 할 일 만 하면 된다.

6. Undo / Redo 를 쉽게 할 수 있다. 값을 바꿀 때, 원본을 직접 바꾸지 않고, 원본을 복제하고, 복제한 데이터를 수정해서 해야한다.

7. 이전의 상태에 대해서도 디버깅을 할 수 있다.