Redux 정리 (2) : actions (액션생성자함수, type, payload)

actions

action은 상태(State)에 변화를 발생시키는 객체이다. action 객체는 type 필드를 필수로 가지고 있어야 하며, 그 외의 값은 개발자 맘대로 넣을 수 있다.
참고로 ajax로 json 데이터를 받아올 때는 actions 파일에 넣게 된다.

---

action 생성자함수 파일 개요 (userActions.js)

파일의 user자리는 개발자 마음대로 action 객체의 목적에 따라 작명하면 된다. (reducer와 동일)
이 파일에는 action 객체를 반환하는 액션 생성자 함수를 작성하게 된다.

이 파일은 일반적으로 아래처럼 작성된다.

export const login = (username, password) => {
  return {
    type: 'LOGIN',
    payload: {
      username,
      password,
    },
  };
};

자세한 설명은 아래와 같다.

---

1. payload

action 객체 안의 필드로, action과 함께 전달되는 데이터를 담고 있다. state(상태)를 업데이트하는 데 사용될 정보를 포함하고 있다.

2. type

action의 종류를 나타내는 문자열이다. reducer가 어떤 동작을 수행할지 식별할 수 있게 한다.

3. 액션 생성자 함수 파라미터

일반적으로 action 생성자 함수의 파라미터는 reducer의 initialState에 정의된 속성을 받아온다.
정의되지 않은 속성을 사용할 경우, reducer 함수 내의 switch case에서 처리를 추가적으로 구현해야 한다. 아래는 예시다.

// Object spread 연산자
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SOME_ACTION':
      return {
        ...state,
        newProperty: action.payload.newValue,
      };
    default:
      return state;
  }
};


// immer나 불변성 라이브러리 사용
import produce from 'immer';

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SOME_ACTION':
      return produce(state, (draftState) => {
        draftState.newProperty = action.payload.newValue;
      });
    default:
      return state;
  }
};

4. 이렇게 작성해도 된다.

export const action = () => ({ type: 'ACTION_NAME' });

export const action = (data) => {
  return {
    type: 'ACTION_NAME',
    payload: data
  };
};

파라미터 있는 버전/없는 버전 액션생성자함수이다.

위 액션생성자함수는 각각 아래와 같이 써도 된다.

import { createAction } from 'redux-actions'
export const action = createAction('ACTION_NAME');

import { createAction } from 'redux-actions'
export const action = createAction('ACTION_NAME', data => data);

 

---

연결된 포스트

다음은 component(컴포넌트)가 상태(state)를 업데이트하는 과정과 dispatch, useSelector를 간단히 정리한다.

https://sunshineyellow.tistory.com/164

Redux 총정리 (3) : dispatch, useSelector, 컴포넌트가 상태를 업데이트하는 과정 총정리

이전 포스팅은 아래와 같다.

https://sunshineyellow.tistory.com/162

Redux 총정리 (1) : 기본 파일 구조 및 reducers (rootReducer, initialState, switch문, Store)

 

---

출처 : React document, 벨로퍼트, ZeroCho, chatGPT