Redux 응용

Redux 어떻게 써야 잘 썼다고 소문이 날까? 라는 글을 읽던중
Presentational & Container 컴포넌트는 이제 그만 을 참고하여 Todos를 만들어 보았다.

//리덕스의 상태와 액션을 사용하는 Custom Hook을 만들어줌
export function useTodos() {
  const dispatch = useDispatch();
  const { todos, input } = useSelector((state) => state.todos);

  const onChangeInput = (input) => {
    dispatch(changeInput(input));
  };
  const onToggle = (id) => {
    dispatch(toggle(id));
  };
  const onRemove = (id) => {
    dispatch(remove(id));
  };
  const onInsert = (text) => {
    dispatch(insert(text));
  };
  return { input, todos, onChangeInput, onToggle, onRemove, onInsert };
}

const Todos = () => {
  const { input, todos, onChangeInput, onToggle, onRemove, onInsert } = useTodos(); // 커스텀 훅 적용

  const onSubmit = (e) => {
    e.preventDefault();
    onInsert(input);
    onChangeInput('');
  };

  const onChange = (e) => onChangeInput(e.target.value);

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input value={input} onChange={onChange} type="text" />
        <button type="submit">등록</button>
      </form>
      <div>
        {todos.map((todo) => (
          <TodoItem todo={todo} key={todo.id} onToggle={onToggle} onRemove={onRemove} />
        ))}
      </div>
    </div>
  );
};

직접 만들어보니 프리젠테이션과 컨테이너를 분리하지 않고 하나의 컴포넌트로 하는게 더 편하다.