[3일차] DO IT 리액트 프로그래밍 정석/p385 ~ p519/가상코인 거래소 만들기,원격 데이터 연결하기

리듀서의 형태

 

const [<상태 객체>, <dispatch 함수>] = useReducer(<reducer 함수>, <초기 상태>, <초기 함수>)

 

reducer 함수는 현재 상태(state) 객체와 행동(action) 객체를 인자로 받아서 새로운 상태(state) 객체를 반환하는 함수입니다. 그리고 dispatch 함수는 컴포넌트 내에서 상태 변경을 일으키기 위해서 사용되는데 인자로 reducer 함수에 넘길 행동(action) 객체를 받습니다. 행동(action) 객체는 관행적으로 어떤 부류의 행동인지를 나타내는 type 속성과 해당 행동과 괸련된 데이터를 담고 있습니다. 다시 말해, 컴포넌트에서 dispatch 함수에 행동(action)을 던지면, reducer 함수가 이 행동(action)에 따라서 상태(state)를 변경해줍니다.

 

import React, { useReducer } from "react"

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <>
      <h2>{state.count}</h2>
      <button onClick={() => dispatch({ type: "INCREMENT", step: 1 })}>
        증가
      </button>
      <button onClick={() => dispatch({ type: "DECREMENT", step: 1 })}>
        감소
      </button>
    </>
  )
}

 

 

현재 카운트 값은 상태(state) 객체로 부터 읽어오고, 카운트 값 변경을 위해서는 각 버튼이 클릭되었을 때 dispatch 함수를 호출하도록 설정해주고 있습니다. dispatch 함수의 인자로 type 속성에는 어떤 변경인지에 따라 INCREMENT 또는 ​DECREMENT가 넘어가고, step 속성에는 변경할 값의 크기를 넘기고 있습니다.

 

 

리듀서의 구조

 

 

 

 

STORE

Redux 스토어(store)는 애플리케이션의 상태를 관리하고, .getState(), .dispach(), .subscribe() 같은 메서드를 제공

​

STATE

Redux 스토어에서 관리하는 상태(데이터) 입니다.

​

ACTION

액션은 애플리케이션에서 "상태 변경을 설명하는 정보"를 스토어로 보내는 JavaScript 객체로 Redux에 알려(dispatch) 변화를 이끌어냅니다. 상태 값을 변경(교체) 할 경우, 교체 할 상태 값(payload)을 리듀서(함수)에

보낼 수 있다.

​

​

Redux의 3원칙

애플리케이션 상태는 모두 한 곳에서 집중 관리됩니다. (동기화 필요 ✘)

상태는 불변(읽기 전용) 데이터 이며, 오직 액션 만이 상태 교체를 요청 할 수 있습니다. (예측 가능)

리듀서(함수)를 통해 상태의 최종 값만 설정합니다. (단순화)

​