[React] useActions로 액션 관리하기

import { useCallback } from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {changeInput, insert, toggle, remove} from '../redux/modules/todos';
import Todos from '../components/Todos';

const TodosContainer = () => {
 const {input, todos} = useSelector(({ todos }) => ({
  input: todos.input,
  todos: todos.todos
 }));
 const dispatch = useDispatch();
 const onChangeInput = useCallback(input => dispatch(changeInput(input)), [dispatch]);
 const onInsert = useCallback(text => dispatch(insert(text)), [dispatch]);
 const onToggle = useCallback(id => dispatch(toggle(id)), [dispatch]);
 const onRemove = useCallback(id => dispatch(remove(id)), [dispatch]);

return (
  <Todos
    input = {input}
    todos = {todos}
    onChangeInput={onChangeInput}
    onInsert={onInsert}
    onToggle={onToggle}
    onRemove={onRemove}
  />
);
};

export default TodosContainer;

액션의 종류가 많은데, 어떤 값이 파라미터로 사용되어야 하는지 일일히 명시해 주어야 하기 때문에
가독성이 떨어지는 것을 확인할 수 있습니다.

 

import { useCallback } from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {changeInput, insert, toggle, remove} from '../redux/modules/todos';
import Todos from '../components/Todos';
import useActions from '../lib/useActions';

const TodosContainer = () => {
 const {input, todos} = useSelector(({ todos }) => ({
  input: todos.input,
  todos: todos.todos
 }));

 const [onChangeInput, onInsert, onToggle, onRemove] = useActions(
  [changeInput, insert, toggle, remove],
  []
 );

return (
  <Todos
    input = {input}
    todos = {todos}
    onChangeInput={onChangeInput}
    onInsert={onInsert}
    onToggle={onToggle}
    onRemove={onRemove}
  />
);
};

export default TodosContainer;

훨씬 깔끔해졌어요 ᵔ◡ᵔ

 

 

물론 이 전에 useActions.js 파일을 생성 해 주어야 합니다!

https://react-redux.js.org/api/hooks#recipe-useactions  

Hooks | React Redux

이 링크에서 코드를 복사 붙여넣기 해서 useActions를 사용하면 됩니다.

import { bindActionCreators } from "redux";
import { useDispatch } from "react-redux";
import { useMemo } from "react";

export default function useActions(actions, deps) {
    const dispatch = useDispatch();

    return useMemo(
        () => {
            if (Array.isArray(actions)) {
                return actions.map(a => bindActionCreators(a, dispatch));
            }
            return bindActionCreators(actions, dispatch);
        },
        deps ? [dispatch, ...deps] : [dispatch]
    );
}