redux

작동방식 요약

앱의 상태 전부는 하나의 스토어(store)안에 있는 객체 트리에 저장됩니다. 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐입니다. 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 여러분은 리듀서(reducers)를 작성해야 합니다

여러분은 Redux를 React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다. Redux는 매우 작습니다 (2kB, 의존 라이브러리 포함).

redux는 react나 다른 뷰 라이브러리와 함께 사용할수 있으며 용량은 매우 작은 편이다 (2kb, 의존 라이브러리 포함)

npm으로 설치를 할시 명령어

npm install --save redux

redux 관련 보조패키지

npm install --save react-redux
npm install --save-dev redux-devtools

redux는 컴포넌트 레벨에 관계없이 전역적으로 접근할수있는 store를 제공하며 이때 store의 데이터를 immutable(불변)하게 관리하기때문에 데이터 추적이 쉽다는 장점이 있다.

이는 함수형 프로그래밍의 장점과 일치한다.

변화를 주기위해서는 action이 필요하다.

reduser가 action을 받아 store에 변화를 일으키고 VIEW를 변화시킨다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

리덕스는 리액트에서 상태를 효율적으로 관리하는데 사용하는 상태 관리 라이브러리이다.

스토어에서 모든 상태관리가 일어난다.

상태에 어떤 변화르 일으켜야 할때는 액션이라는것을 스토어에 전달한다.

액션은 객체 형태로 되어있으며, 상태를 변화시킬 때 이 객체를 참조하여 변화를 일으킨다.

액션을 전달하는 과정은 디스패치라고 한다.

스토어가 액션을 받으면 리듀서가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야할지 정한다.

액션을 처리하면 새 상태를 스토어에 저장한다,

스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에 바로 전달합니다.

부모 컴포넌트로 props를 전달하는 작업은 생략하며, 리덕스에 연결하는 함수를 사용하여 컴포넌트를 스토어에 구독시킨다.

스토어

액션

디스패치

리듀서

상태관리 라이브러리(리덕스 등) 을 사용하지않고 state만 사용한다면 다음 문제점이 있다.

-상태 객체가 복잡하고 크다.

-최상위 컴포넌트에서 상태관리를 하는 메서드를 너무 많이 만들어 코드가 복잡하다.

- 하위 컴포넌트에서 props를 전달하려면 여러 컴포넌트를 거쳐야한다.

리덕스의 목표는 플럭스를 기반으로 애플리케이션 안에서 변경된 데이터가 어떻게 흘러가는지 더 명확히 표현하도록 해주는 것이다.

리덕스는 플럭스와 비슷하지만 플럭스와는 같지않다. 리덕스에는 액션, 액션 생성기, 스토어가 있고 상태를 바꿀때 사용하는 액션 객체가 있다.

리덕스는 디스패처를 없애고 애플리케이션 상태를 불변 객체 하나로 표현함으로써 플럭스의 개념을 더 단순화했다.

리덕스에는 플럭스 패턴에는 없는 리듀서 부분이 들어가있다. 

리듀서는 현재 상태와 액션에 따라 새로운 상태를 반환하는 함수이다.

리듀서의 타입은 '(상태, 액션) => 새상태' 라고 할수있다.

상태

액션

상태를 바꿀때는 객체 전체를 바꿔치기 하는 방식을 사용한다.

액션이 바꿀 대상을 지정하는 명령을 제공한다.

리듀서

전체 상태 트리는 한 객체 안에 들어있다.

이로인해 상태를 충분히 모듈화 하지 못한게 아닌가? 라고 생각되지만, 리덕스는 함수로 모듈화를 제공한다.

리덕스에서는 함수를 사용해 상태 트리 일부를 갱신한다. 이런 함수를 리듀서라 부른다.

리듀서는 현재 상태와 액션을 인자로 받아 새로운 상태를 만들어 반환하는 함수이다.

리듀서는 상태 트리 중 특정 부분을 갱신하기 위해 만든 함수이다.

스토어

리덕스에서 스토어는 애플리케이션의 상태 데이터를 저장하고 모든 상태 갱신을 처리한다.

플럭스 디자인 패턴에서는 특정 데이터 집합에만 초점을 맞춘 여러 스토어를 허용하지만 리덕스에서는 오직 한 스토어만 허용한다.

스토어는 현재 상태와 액션을 한 리듀서에 전달해서 상태 갱신을 처리한다.

앞에서 만든 여러 리듀서를 조합하고 합성해서 스토어가 사용할 단일 리듀서를 만들수 있다.

미들웨어

미들웨어는 서로 다른 두 계층이나 두 소프트웨어를 붙여주는 풀 같은 역할을 하는 소프트웨어이다.

참고) 1. learning react(서적)

       2. redux 공식문서