Redux-Actions 이용한 리덕스 모듈

헷갈려서 기록하는 Redux-Action

Redux Actions을 사용하지 않은 Redux 모듈

// 액션 타입 정의
const CHANGE_INPUT = 'totos/CHANGE_INPUT';
const INSERT = 'todos/INSERT';
const TOGGLE = 'todos/TOGGLE';
const REMOVE = 'todos/REMOVE';

// 액션 생성 함수
export const changeInput = (input) => ({
  type: CHANGE_INPUT,
  input,
});

let id = 1;
export const insert = (text) => ({
  type: INSERT,
  todo: {
    id: id++,
    text,
    done: false,
  },
});

export const toggle = (id) => ({
  type: TOGGLE,
  id,
});

export const remove = (id) => ({
  type: REMOVE,
  id,
});

// 초기 상태 만들기
const initialState = {
  input: '',
  todos: [
    {
      id: 1,
      text: '리덕스 기초 배우기',
      done: true,
    },
  ],
};

// 리듀서 작성
function todos(state = initialState, action) {
  switch (action.type) {
    case CHANGE_INPUT:
      return {
        ...state,
        input: action.input,
      };
    case INSERT:
      return {
        ...state,
        todos: state.todos.concat(action.todo),
      };
    case TOGGLE:
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, done: !todo.done } : todo,
        ),
      };
    case REMOVE:
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
      defalut: return state;
  }
}

export default todos;

redux actions을 사용한 모듈 (todos)

• createAction(액션 객체 타입, payload 정의하는 함수)

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

  export const changeInput = createAction(CHANGE_INPUT, input=>input)

  export const insert = (text) => ({
      type: INSERT,
      todo: {
          id: id++,
          text,
          done: false,
      },
  });

  export const insert = createAction(INSERT, text=> ({
      id: id++,
      text,
      done: false
  }))

• handleACtions : 리듀서 작성 도와주는 함수

  function todos(state = initialState, action) {
  switch (action.type) {
      case CHANGE_INPUT:
      return {
          ...state,
          input: action.input,
      };
      case INSERT:
      return {
          ...state,
          todos: state.todos.concat(action.todo),
      };
      case TOGGLE:
      return {
          ...state,
          todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, done: !todo.done } : todo,
          ),
      };
      case REMOVE:
      return {
          ...state,
          todos: state.todos.filter((todo) => todo.id !== action.id),
      };
      defalut: return state;
  }
  }

  const todos = handleActions(
      {
          [CHANGE_INPUT]: (state, action) => ({...state, input: action.payload})
          [INSERT] : (state, action) =>  (
              {
                  ...state,
                  todos: state.todos.map(todo =>
                  todo.id === action.payload ? { ...todo, done: !todo.done} : todo,
                  )
              }
          )
          [TOGGLE] : (state, action) => ...
          [REMOVE] : (state, action) => ...
      }
  )

• payload : 액션 생성 함수에서 파라미터 데이터 이름

• action.payload의 의미
  액션 타입이 CHANGE_INPUT인 경우, type 외에 파라미터 input을 payload에 저장한다. 즉 action.payload = input

  export const changeInput = (input) => ({
      type: CHANGE_INPUT,
      input,
  });
  
  [CHANGE_INPUT]: (state, action) => ({...state, input: action.payload})