[React] Redux

Steve·2021년 6월 8일

React redux

웹개발 코스

목록 보기

38/59

Redux

(of a topic, attributive, postpositive) Redone, restored, brought back, or revisited. 돌아온.

After an unusually cold August, September felt like summer redux as a heatwave sent temperatures soaring.
redux 라는 단어의 뜻이랑 별 상관은 없는 듯 하다.

Redux 는 상태관리를 위한 자바스크립트 라이브러리이다.

Redux 가 필요한 이유

Redux 는...

Global state storage 를 제공
Props drilling(Props 내리꽂기) 방지

상태에는 local, global 두가지 종류가 있다.

Local state 는 한 컴포넌트 안에서 정의되어 그 컴포넌트 안에서만 관리되는 state 이다.
Global state 는 한 컴포넌트 안에서 정의되어 다른 컴포넌트에서 관리되는 state 이다.

React 에서 하위 컴포넌트가 상위 컴포넌트의 state 에 접근하려면 props 로 state 나 state 를 변경하는 함수를 전달해야 한다. 그런데 만약 5단계 밑의 자식에게 전해야 하다면 매 자식 컴포넌트마다 props 로 전달해야 한다. 매 컴포넌트가 이 props 가 꼭 필요하지 않는 경우도 있기 때문에 중간에 오류가 나면 관리가 힘들다. 따라서 Redux 를 이용하여 전역 상태 저장소를 만들어 자식 component 들을 거지치 않고도 자식 컴포넌트가 state 에 접근할 수 있도록 만들어준다.

3 principles of redux

Single source of truth (store)
State is read-only (only through action)
Changes are made with pure functions (reducer function)

Redux flow

import { createStore } from 'redux'

// REDUCER
// 현재의 state 와 action 객체를 받아 새로운 state 를 return 하는 함수.
function myReducer(state = { value: 0 }, action) {
  switch(action.type) {
    case 'increment':
      return { value: state.value + action.value }
    case 'decrement':
      return { value: state.value - 1 }
  }
}

// STORE
// app 의 state 를 들고 있는 store 객체이다.
const store = createStore(myReducer)

// ACTION
// Action creator - action 객체를 만든다.
function increment(value) {
  return {
    type: 'increment',
    value // value: value
  }
}
function decrement(){
  return { type: 'decrement' }
}

// DISPATCH
// 상태를 update 하는 유일한 방법은 dispatch() 함수에 action 객체를 전달하는 것이다.
// store는 reducer 함수를 실행하고 상태를 update 하여 저장한다. 
function handleIncrement(value){
  store.dispatch(increment(value))
}
function handleDecrement(){
  store.dispatch(decrement())
}

// DISPATCH for react-redux (redux hooks)
useDispatch(함수)

// state 조회
handleIncrement(4)
console.log(state.getState()) // { value: 4 }

// SELECTOR
// Selector 함수는 어떤 state 를 store 에서 가져오는지 지정하는 함수다.
const selectMyValue = function(state) { return state.value } 
// 'value' 라는 상태를 가져올 것이다.
const currentValue = selectMyValue(store.getState())
console.log(currentValue) // 4

// SELECTOR for react-redux (redux hooks)
const state = useSelector(state => state.myReducer);