React24일차-redux-action

저번 게시물 기준 폴더에서 코드로 열어주시고 npm i redux-actions 해주시고

redux/modules/add1.js열어주세요

import { handleActions } from "redux-actions";

import createAction from "redux-actions/lib/createAction";

export const ADD = createAction("ADD", (text) => text);

export const SUB = createAction("SUB", (text) => text);

const reducer = handleActions(

  {

    ADD: (previousState, action) => {

      previousState.push(action.payload);

      return previousState;

    },

    SUB: (previousState, action) => {

      return previousState.filter((p) => p !== action.payload);

    },

  },

  []

);

console.log(ADD(10));

export default reducer;

이렇게 수정

export const ADD = createAction("ADD", (text) => text); 이걸 보자 이건 어떻게 되는거냐 ADD를 실행시면 타입으로는 "ADD" 가 가고 payload에 우리가 전달받은 text가 반환된다 즉

createAction(type내용,(인자)=>return값)이런식으로 실행이된다.

콘솔에 찍으면 이런식으로 나온다 이걸 이용해서 사용하면 된다.

그럼 밑에 handleActions를 보자  if 안에썼던 조건을 앞에 쓰고 뒤에는 함수로 쓰면 전달받은 type값이 같으면 그 함수가 작동이 된다.

즉 type이름:(이전state,action)=>실행할 함수내용 이런식으로 묶어서 만들수 있다. 

그리고 이걸 변수에 담아서 변수를 expor default하면 된다.

아까 길던것들을 이렇게 줄일수 있어서 유용하게 사용된다. 이제 제대로 동작되나 확인해보겠다

이렇게 제대로 동작이 되는것을 확인할수 있다.