Redux

기존 리액트는 한 번의 변경으로 수많은 상태 변경 과정이 이뤄져야 하고 이 과정에서 무분별한 렌더링이 일어나게 된다 만약 컴포넌트가 100개 1000개가 된다고 가정하면 관리하기 어렵고   오류가 발생하는 원인이 되며 흐름 자체를 파악하여 어디서 오류가 났는지 조차도 모르는 경우가 생겨난다

0

Redux

리덕스(Redux)는 리액트에서 가장 사용률이 높은 상태관리 라이브러리이고  컴포넌트들의 상태 로직들이나 글로벌 상태 관리를 손쉽게 해줄 수 있다

0

state를 쉽게 관리할 수 있고 웹사이트의 상태를 어디서 관리할지 고민하지 않아되며 어떤 액션이 취해졌고, 어떤 데이터가 어떻게 변경되었는지 쉽게 알 수 있다

0

Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르는 방식이다

1. Action

상태에 변화가 필요할 때 Action을 발생시키게 되는데 이때 Action은 하나의 객체로 전달되며 Action 객체는 반드시 type 필드를 가지고 있어야 한다

{
  type: "ADD_NUM",
 
}

2. Action 생성함수

Action 생성함수는, Action을 만드는 함수이다

export const addNum = () => {
  type: "ADD_NUM",
  text
}

3. Reducer

Reducer 상태를 변화시키는 함수이며 Action을 만들어서 발생 시키면 Reducer가 현재 상태와 전달받은 액션 객체를

파라미터로 받아 온뒤 두 값을 참고하여 새로운 상태를 만들어 반환 해준다

Reducer 는 불변성을 유지하면서 데이터에 변화를 주어야 한다=>spread 연산자 사용

const counter = (state,action) => {
  switch(action.type) {
    case "ADD_NUM":
      return state + 1;
    case "MINUS_NUM":
      return state - 1;
    default:
      return state;
  }
}

4. Store

Store 상태와 Reducer를 포함하는 객체이며  앱에서 단 하나만 가질 수 있다

import { createStore } from 'redux';



// 파라미터에는 리듀서 함수를 넣어주어야 함
const store = createStore(reducer);

5. dispatch

dispatch는 액션을 발생시키는 스토어의 내장함수 중 하나이고 Action 객체를 파라미터로 넣어 호출한다

dispatch 호출되면 Store는 Reducer함수를 실행시켜 새로운 상태로 만들어준다

import { createStore } from 'redux';



// 파라미터에는 리듀서 함수를 넣어주어야 함
const store = createStore(reducer);

button.onclick = () => { 
   // dispatch 함수를 사용하여 액션을 스토어에게 전달
   store.dispatch(add(1));
}