Why Redux?

리덕스에 대해서 굳이 필요없다, 작은프로젝트에 리덕스를 사용하는건 설계 과잉이다 등등의 말들이 많다 ... 하지만!

우선 리덕스는 편하다. 리덕스의 주요기능은 State Management이다.(내 생각에도 이게 가장 멋진 부분!) 사실 리액트만으로도 충분히 state를 잘 다룰(?)수 있다. 하지만 Component가 2,3단계만 깊이 들어가더라도 각 컴포넌트들은 아무이유없이 this.props로 state를 넘겨줘야. 꽤 불편하다. 리덕스는 이러한부분을 해결해준다. 모든 컴포넌트에서 state를 공유할수 있다.

모든 State가 하나의 스토어(store)안에 있는 객체트리에 저장된다. state를 변경하는 유일한 방법은 액션(action)을 보내는 방법뿐이다.(함수형 setState느낌이 빡) 액션이 상태트리를 어떻게 변경할지를 명시하기위해 리듀서(reducer)를 작성한다.

import { createStore } from 'redux'

/**
 * 이것이 (state, action) => state 형태의 순수 함수인 리듀서입니다.
 * 리듀서는 액션이 어떻게 상태를 다음 상태로 변경하는지 서술합니다.
 *
 * 상태의 모양은 당신 마음대로입니다: 기본형(primitive)일수도, 배열일수도, 객체일수도,
 * 심지어 Immutable.js 자료구조일수도 있습니다. 오직 중요한 점은 상태 객체를 변경해서는 안되며,
 * 상태가 바뀐다면 새로운 객체를 반환해야 한다는 것입니다.
 *
 * 이 예시에서 우리는 `switch` 구문과 문자열을 썼지만,
 * 여러분의 프로젝트에 맞게
 * (함수 맵 같은) 다른 컨벤션을 따르셔도 좋습니다.
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

// 앱의 상태를 보관하는 Redux 스토어를 만듭니다.
// API로는 { subscribe, dispatch, getState }가 있습니다.
let store = createStore(counter)

// 업데이트를 직접 구독하거나 뷰 레이어에 바인딩할수 있습니다.
// 보통은 subscribe()를 직접 사용하기보다는 뷰 바인딩 라이브러리(예를 들어 React Redux)를 사용합니다.
// 하지만 현재 상태를 localStorage에 영속적으로 저장할 때도 편리합니다.

store.subscribe(() =>
  console.log(store.getState())
)

// 내부 상태를 변경하는 유일한 방법은 액션을 보내는 것뿐입니다.
// 액션은 직렬화될수도, 로깅할수도, 저장할수도 있으며 나중에 재실행할수도 있습니다.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

사이즈도 크지않다.(2kb)

솔직히 redux에대해 어쩌구하는말은 개소리다 그런사람은 그냥 모든 코딩을 할때 어셈블리만 존나 쓰면좋겠다.

3가지 원칙

Pure Functions

오직 전달된 데이터에만 의존해야한다. database나 그 어떤 다른 데이터 말고

리듀서는 그저 이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수입니다. 이전 상태를 변경하는 대신 새로운 상태 객체를 생성해서 반환해야한다는 사실을 기억해야 합니다

같은 값을 대입하면 같은 결과가 나와야한다.

let = numbers = [1,2,3]
//slice는 pure function이다.
numbers.slice(0,1) // => [1]
numbers.slice(0,1) // => [1]
numbers.slice(0,1) // => [1]

//splice는 아니다.
numbers.splice(0,1) // => [1]
numbers.splice(0,1) // => [2]
numbers.splice(0,1) // => [3]

No Side Effects

pure functinons은 함수밖의 세상과 상호작용을 하거나 하는 부작용이 있으면 안된다. 예를들어

  • making HTTP calls
  • Mutating external state
  • Retreving todays's date
  • Math.random()
  • Printing a message to the console
  • Adding to a database
  • ...

Redux Stores vs Component State

반드시 모든 데이터를 redux에만 넣을 필요는 없다. 어떤 데이터의 경우는 컴포넌트에 state로 존재하는게 더 좋을 수도 있다.

React Component State

short lived state that doesn't matter to the app globally and doesn't mutate in complex ways.

앱전체예 영향을 주거나 막 복잡하게 변하지 않는 혹은 겁나 복잡하지만 그 컴포넌트 말고는 전혀 영향이 없는 (어처구니없는 드롭다운 애니메이션 같은) 짧은 기간동안 살아있으면 되는 고런 데이터

예) toggle in some ui element, form input state

Redux

먼가 복잡시럽고 앱전체에 영향을 주는 데이터

참고

results matching ""

    No results matching ""