[TIL]

Redux Aciton type 정의

export const ActionType = "@@folderName/ActionTypeName"
// @@ 와 folderName/ prefix를 이용하여 같은 ActionTypeName의 충돌을 피하기 위해 사용

Ducks 구조

: Redux 공식 문서에서는, ActionType, Action, Reducer이 3가지를 따로 다룬다. 하나의 액션을 추가하려면 3개의 다른 파일들을 수정해야한다. 이에 따라 Ducks 구조에는 Reducer파일 안에 액션타입과 액션생성자 함수를 함께 넣어서 관리하고 이를 '모듈'이라고 부른다.

// widgets.js

// Actions
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

// Reducer
export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}

// Action Creators
export function loadWidgets() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE, widget };
}

export function updateWidget(widget) {
  return { type: UPDATE, widget };
}

export function removeWidget(widget) {
  return { type: REMOVE, widget };
}

1. 최상단엔 ActionType을 정의한다.
2. Reducer를 정의하여 export default로 내보낸다.
3. 같은 파일에서 ActionCreator도 export를 통해 내보낸다.
4. 이 패턴에서 따를 규칙은, ActionType을 만들때 npm-module-or-app/reducer/ACTION_TYPE의 형식으로 만들어야 한다.
5. NPM모듈을 만드는게 아니라면, reducer/ACTION_TYPE형식으로만 만들어도 상관없다.

redux-actions

: redux-actions패키지에는 리덕스의 액션들을 관리하기 위한 유용한 createAction과 handleActions가 있다.

createAction을 통한 액션생성 자동화

export const increment = createAction(types.INCREMENT);
export const decrement = createAction(types.DECREMENT);

switch 문 대신 handleActions 사용

const reducer = handleActions({
  INCREMENT: (state, action) => ({
    counter: state.counter + action.payload
  }),

  DECREMENT: (state, action) => ({
    counter: state.counter - action.payload
  })
}, { counter: 0 });

: Reducer에서 액션의 type에 따라 다른 작업을 하기 위해서 swithc문을 사용했다. 하지만, 이 방식엔 scope가 reducer함수로 설정되어 있따. 그렇기 때문에 서로 다른 case에서 let이나 const를 통하여 변수를 선언하려고 하다보면 같은 이름이 중첩될시엔 에러가 발생한다.

첫번째 파라미터로는 액션에 따라 실행할 함수들을 가지고 있는 객체, 두번째 파라미터로는 상태의 기본 값(initialState)를 넣어준다.

[참고]https://velopert.com/3358