본문 바로가기
Javascript

Redux

by reo.l 2021. 3. 1.

redux는 애플리케이션 상태를 관리하기 위한 오픈 소스 javascript 라이브러리이다.

특히 react와 함께 사용 시에 큰 효과를 낸다.

그동안 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았으나

redux를 통해 상태 변경 로직을 컴포넌트로부터 분리하여 따로 관리 함으로써

표현에 집중한 보다 단순한 함수 컴포넌트로 만들 수 있게 되었다.

redux는 위와 같이 store 안에 state, 그리고 4개의 함수로 구성이 되어있고

각 선에 따라 관계를 갖고 redux가 실행된다. 

 

action

action은 store내의 state값을 변경, 삭제하기 위한 객체이다.

//action 객체
{
  type: 'color', // type은 반드시 명시해야 한다.
  value: 'red'
}

주의할 점은 반드시 type값을 명시해 주어야 한다.

dispatch를 통해 reducer실행 시 type 값이 없으면 store의 state에 접근할 수 없다.

 

dispatch

dispatch는 action객체를 인자로 받으며 reducer함수를 호출한다.

또한 dispatch가 reducer함수를 호출 시에 두 개의 인자로 현재의 state값과 action값을 전달한다.

과정이 끝나면 subscribe를 호출하여 화면에 render 해준다.

store.dispatch({ type: 'color', value: 'red' })

 

reducer

reducer는 dispatch로부터 state, action값을 받아 state값을 바꾸어 준다.

function reducer(state, action) {

  switch (action.type) {
    case color:
      let newState = Object.assign({}, state, {
        value: action.value
      })
      return newState
      // Object.assign을 통해 shallow copy한 newState를 리턴한다.
      // redo, undo 등처럼 log를 위한 것이다.
  }
}

위처럼 새로운 객체를 리턴하는 reducer함수를 거치면 store의 state가 return 값으로 갱신된다.

 

위의 그림처럼 action을 매개변수로 하는 dispatch가

reducer함수를 호출하여 store의 state값에 접근할 수 있도록 하고

action값과 state를 매개변수로 받은 reducer가

state를 갱신 함으로써 사용자의 인터페이스에 render 된다.

이처럼 복잡한 관계로 얽힐 수 있는 state를 전역에서 관리 함으로써

애플리케이션 구현의 복잡성을 획기적으로 낮출 수 있다.

 

 

댓글