[React.js] Redux 개념

단순히 전역상태 관리를 한다면 Context Api를 사용하는 것만으로도 충분하다. 하지만 더 세부적이고 체계적으로 관리해야 되는 큰 프로젝트라면 리덕스를 사용하는 편이 유지 보수적인 측면이나 작업 효율도 더 좋다고 한다.

1. ACTION

상태의 변화가 발생하면 액션이 발생한다.
액션은 하나의 객체로 표현되는데 다음과 같이 표현되며, type을 반드시 가지고 있어야 한다.

{
    type: 'NEW_ACTION',
    text: 'Hello World'
}

type 이 외의 값들은 상태가 변화될 때 참고하는 값으로 작성자가 임의로 넣을 수 있다.

액션 = 상태 정보 객체 // 어떤 일이 일었나는지 저장하는 것

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce() - JavaScript | MDN

 

2. REDUCER

리듀서는 변화를 발생시키는 함수이다.
액션을 발생시키면 리듀서가 현재상태와 액션 객체를 파라미터로 받아 새로운 상태를 반환해준다.

(previousState, action) => nextState

이전 상태와 액션을 받아 다음 상태로 리턴하는 것

 

3. STORE

상태와 리듀서 및 내장함수들이 저장되는 저장공간이며, 한 프로젝트에는 하나의 STORE를 가질 수 있다.

 

4. Dispatch

STORE의 내장함수로 액션을 만드는 함수이다. dispatch(action)과 같이 액션 객체를 파라미터로 넣어서 사용한다.

 

5. Subscribe

STORE의 내장함수로 리스너 함수를 넣어주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다.

상태가 바뀌면 감지해서 알려주는것 

 

결론: 상태를 스토어에 저장해놓고 바꾸고 싶으면 디스패치로 바꾸고 구독이 컴포넌트에게 바뀐게 있다고 신호를 주는 것?

 

추가// action type을 정의하고 dispatch를 하면 해당 액션타입에 매핑된 reducer가 호출된다.

reducer는 일종의 repository 같은 역할인듯하다