[Redux] redux-actions 라이브러리

액션 생섬 함수, 리듀서를 작성할때 redux-actions라이브러리를 사용하여 보다 편하게 사용할 수 있습니다.

➡️ redux-actions 설치

$ yarn add redux-actions

redux-actions를 사용하면 액션 생성 함수를 더 짧은 코드로 작성할 수 있습니다.

✔️ createAction

createAction을 사용하면 매번 객체를 직접 만들어 줄 필요 없이 더욱 간단하게 액션 생성 함수를 선언할 수 있습니다.

// modules/counter.js
import {createAction} from 'redux-actions'

//액션타입 -> 상태 변화가 일어나는 것 
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

// 액션함수
// ## 원래 코드
// export const increase = ()=>({type:INCREASE})
// export const decrease =()=>({type:DECREASE})

// ## redux-actions
export const increase = createAction(INCREASE)
export const decrease = createAction(DECREASE)

✔️ handleActions

handleActions 함수의 첫번째 파라미터에는 각 액션에 대한 업데이트 함수를 넣어주고, 두번째 파라미터에는 초기 상태를 넣어 줍니다.

import {createAction,handleActions} from 'redux-actions'

(...)

//리듀서 함수 생성
//## 원래코드
// const counter=(state=initialState,action)=>{
//     switch(action.type){
//         case INCREASE:
//             return{
//                 number:state.number+1
//             }
//         case DECREASE:
//             return{
//                 number:state.number-1
//             }
//         default:
//             return state;
//     }
// }

// export default counter;

// ## handleActions

const counter = handleActions({
    [INCREASE] : (state,action) => ({number : state.number+1}),
    [DECREASE] : (state,action) => ({number : state.number -1})
}, initialState)

export default counter;

➡️ 액션 생성 함수에서 파라미터가 필요한 경우의 redux-actions

✔️ createAction

import {createAction,handleActions} from 'redux-actions'

const CHANGE_INPUT = 'todos/CHANGE_INPUT';
const INSERT = 'todos/INSERT';
const TOGGLE = 'todos/TOGGLE';
const REMOVE = 'todos/REMOVE';

//액션 함수
// ## 원래 코드
// export const changeInput = input =>({
//     type:CHANGE_INPUT,
//     input
// })
// let id = 3;
// 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
// })


// ## redux-actions
export const changeInput = createAction(CHANGE_INPUT, input=>input);

let id =3;
export const insert = createAction(INSERT, text =>({
    id:id++,
    text,
    done:false
})) 
export const toggle = createAction(TOGGLE,id=>id);
export const remove = createAction(REMOVE,id=>id)

✔️ handleActions

createAction으로 만든 액션 생성 함수는 파라미터로 받아오 온 값을 객체 안에 넣을 때 원하는 이름으로 넣는 것이 아니라 action.payload라는 이름 공통적으로 넣어주게 된다.

//리듀서 함수 만들기
// ## 기존코드
// 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)
//             }
//         default:
//             return state;
//     }
// }

// export default todos;


// ## redux-actions
const todos = handleActions(
    {
        [CHANGE_INPUT] : (state,action)=>
      ({...state,input:action.payload}),
        [INSERT] : (state,action)=>
      ({...state,todos:state.todos.concat(action.payload)}),
        [TOGGLE] : (state,action)=>
     ({...state,todos:state.todos.map(todo=>todo.id===action.payload?
                                      {...todo,done:!todo.done}:todo)}),
        [REMOVE]: (state,action) =>
      ({...state,todos:state.todos.filter(todo=>todo.id!==action.payload)})
    },
    initialState
)

export default todos;

객체 비구조화 할당 문법으로 action 값의 payload 이름을 새로 설정해 주면 action.payload가 정확히 어떤 값을 의미하지는 쉽게 파악 가능합니다.

// ## 기존 코드
const todos = handleActions(
    {
        [CHANGE_INPUT] : (state,action)=>
      ({...state,input:action.payload}),
        [INSERT] : (state,action)=>
      ({...state,todos:state.todos.concat(action.payload)}),
        [TOGGLE] : (state,action)=>
     ({...state,todos:state.todos.map(todo=>todo.id===action.payload?
                                      {...todo,done:!todo.done}:todo)}),
        [REMOVE]: (state,action) =>
      ({...state,todos:state.todos.filter(todo=>todo.id!==action.payload)})
    },
    initialState
)

export default todos;

// ## 객체 비구조화 할당 문법
const todos = handleActions({
    [CHANGE_INPUT]: (state, {payload:input})=> ({...state,input}),
    [INSERT]: (state,{payload:todo})=>
  ({...state,todos:state.todos.concat(todo)}),
    [TOGGLE] : (state,{payload:id})=> 
  ({...state, todos:state.todos.map(todo=>todo.id===id? 
                                    {...todo,done:!todo.done}:todo)}),
    [REMOVE] : (state,{payload:id})=> 
  ({...state, todos:state.todos.filter(todo=>todo.id!==id)})
}, initialState)

export default todos;