리덕스에서 사용하는 키워드

 

---

 

액션(Action)

상태변화가 필요할 때 액션을 발생시킴 주로 객체로 표현되며 다음과 같음, 액션 객체는 type 필드를 필수로 가져야 하며 그 외 값들은 개발자 마음임

{
  type: "TOGGLE_VALUE"
}

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}
{
  type: "CHANGE_INPUT",
  text: "안녕하세요"
}

 

---

 

액션 생성함수(Action Creation)

액션 생성함수는 액션을 만드는 함수다. 파라미터를 받아서 액션객체로 만들어줌

function

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

화살표 함수형태

export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

 

액션생성함수를 만드는 이유
1. 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함

2. 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용함

 

---

 

리듀서(Reducer)

 

리듀서는 변화를 일으키는 함수, 리듀서는 두가지 파라미터를 받아옴 (state, action)

function reducer(state, action){

return alteredState;

}

 

리듀서는 현재상태와 전달받은 액션을 참고해서 새로운 상태를 만든 뒤 반환함

이 리듀서는 useReducer를 사용할 때 작성하는 리듀서와 똑같은 형태를 가지고 있음

usereducer를 사용할 떄의 리듀서 예시

import { useReducer, useEffect } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'LOADING':
      return {
        loading: true,
        data: null,
        error: null
      };
    case 'SUCCESS':
      return {
        loading: false,
        data: action.data,
        error: null
      };
    case 'ERROR':
      return {
        loading: false,
        data: null,
        error: action.error
      };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

카운터를 사용하는 리듀서를 작성하면 다음의 예시를 참고

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

 

 

useReducer 에서는 default: throw new Error('Unhandled Action')과 같이 에러를 발생시키도록 처리

Redux의 reducer에서는 기존 state를 반환하도록 작성해야함

 

리덕스를 사용할 때 여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서(Root Reducer)를 만들 수 있음 
그리고 루트 리듀서 안에 리듀서를 서브 리듀서라고 부름

 

---

스토어(Store)

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들고 스토어 안에는 현재 앱상태, 리듀서, 몇가지 내장함수가 있음

 

---

디스패치(dispatch)

위의 스토어의 내장함수 중 하나로 디스패치는 액션을 발생시키는 것으로 이해하면 됨

dispatch라는 함수에 액션을 파라미터로 전달함 

예시 :
dispatch(action)

 

코드예시 : 

 

  const fetchData = async () => {
    dispatch({ type: 'LOADING' });
    try {
      const data = await callback();
      dispatch({ type: 'SUCCESS', data });
    } catch (e) {
      dispatch({ type: 'ERROR', error: e });
    }
  };

 

위와 같이 호출하면 스토어는 리듀서 함수를 실행시키고 해당 액션을 처리하는 로직이 있으면 액션을 참고해서 새로운 상태를 만들어줌 

 

---

 

구독 (Subscribe)

 

구독 또한 스토어의 내장함수 중 하나로 함수 형태의 값을 파라미터로 받아옴

subscribe 함수에 특정 함수를 전달하면 액션이 디스패치 될 때마다 전달해준 함수가 호출됨

 

리액트에서 리덕스를 사용할 때 이 함수를 직접 쓰는 일은 거의 없음

 

 

 

 

 

참고링크 : https://react.vlpt.us/redux/01-keywords.html