[ReactJS] Redux란?

December 02, 2019

Redux?

컴포넌트가 많이 나뉠수록 복잡해지는 state값을 관리해주는 라이브러리. 상태변화값들을 스토어에 담아 직접 주입하는 식으로 처리하기 때문에 글로벌한 상태 관리가 가능하다.

하나의 어플리케이션 안에는 하나의 스토어만 가능
state값은 무조건 읽기 전용
리듀서는 반드시 순수함수. 항상 똑같은 값을 내보내야함. (Math.random() X)

액션

상태 변화가 필요할 때 액션을 발생시켜 보냄. 어떤 액션인지 정의하는 타입값이 반드시 필요함. 액션을 일일히 생성하는 것은 번거로우므로 액션을 생성하는 액션 함수를 따로 만들어 사용하기도 함. 액션 타입은 상수값으로 정의. 타입 외에 유동적인 값이 필요하다면 매개변수를 넣어 액션을 처리함.

// 액션 타입 지정 상수
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

// 액션 생성 함수
const increment = diff => ({
  type: INCREMENT,
  diff: diff,
})

const decrement = diff => ({
  type: DECREMENT,
  diff: diff,
})

리듀서

상태값을 변화시키는 함수. 현재 상태와 액션 객체 파라미터 두개를 받음. 액션 타입에 따라 상태를 반들어서 반환해야하기 때문에 switch문을 이용함. 항상 init 초기값을 설정해야 만들 수 있음.

// 초깃값 설정 - 리듀서
const initialState = {
  number: 0,
}

// 리듀서 함수
function counter(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return { number: state.number + action.diff }
    case DECREMENT:
      return { number: state.number - action.diff }
    default:
      return state
  }
}

스토어

현재의 앱 상태, 리듀서, 여러 내장 함수들을 가지고 있는 컨테이너 같은 것임. createStore 함수 사용. 파라미터로 리듀서 함수를 전달.

const { createStore } = Redux
// import {createStore} from 'redux';

const store = createStore(counter)

스토어 내장함수. 구독함수는 함수 형태로 파라미터값을 받아옴.

const unsubscribe = store.subscribe(() => {
  // getState = 현재 스토어 상태 반환하기.
  console.log(store.getState())
})

디스패치

스토어의 내장함수. 액션을 직접 발생시키는 애임. 액션을 파라미터로 전달해서 호출시키면 스토어가 리듀서 함수를 실행시키고, 새로운 상태값을 만들어줌.

store.dispatch(increment(1))
store.dispatch(decrement(5))
store.dispatch(increment(10))

Written by@orongee22

GitHub Velog