Todo list를 통한 redux학습하기(5)
이번 포스팅에서는 todo 삭제와 완료기능을 구현해 볼 것이다.
complete와 delete action을 add와 같은 방식으로 작성했다. 차이점은 todos 중 complete나 delete를 할 todo를 식별해야 하기 때문에 tpye과 함께 index값을 넘겨주었다.
다음은 Todo 컴포넌트. Complete 버튼과 Delete 버튼에 각각 onClick이벤트를 정해준다.
const completeStatus 값은 리스트가 complete되었을 때, 되지 않았을 때를 시각적으로 구별해주기 위해 클래스명을 다르게 처리해주는 부분이다. bootstrap class명을 사용했기 때문에 ‘success’와 ‘secondary’에 큰 의미는 없다. 단지 초록색과 회색을 표현하기 위해 사용했다.
// components/TodoList.js...const TodoList = ({ todos, onTodoComplete, onTodoDelete }) => (
<ul className='list-group container'>
{todos.map((todo, index) => (
<Todo
key={index} {...todo}
onComplete={() => {onTodoComplete(index)}}
onDelete={() => {onTodoDelete(index)}}
index={index}
/>
))}
</ul>
);...
TodoList는 VisibleTodoList container component에서 ‘onTodoComplete’와 ‘onTodoDelete’ 두 개의 store로 dispatch를 시키는 function을 받아 todo component에서 넘겨주도록 한다. store.dispatch()함수를 넘기는 부분은 VisibleTodoList.js에서 작성하도록 하겠다.
VisibleTodoList container에서는 새롭게 mapDispatchToProps라는 함수를 만들어 줄 것이다. 이 함수는 dispatch를 인자로 전달받고 적절한 action을 dispatch시키는 함수들을 반환한다.
// reducers/index.js...case COMPLETE_TODO:
return [
...state.slice(0, action.index),
Object.assign({}, state[action.index], {
completed: !state[action.index].completed
}),
...state.slice(action.index + 1)
];
case DELETE_TODO:
return [
...state.slice(0, action.index),
...state.slice(action.index + 1)
];...
action을 전달받아 새로운 state를 반환하는 reducer에서는 COMPLETE_TODO와 DELETE_TODO에 대한 분기처리를 추가해주었다. complete의 경우에는 해당 index todo의 completed state를 toggle해주고, delete의 경우에는 해당 index의 todo를 제외한 나머지 todos를 새 state로 반환해주었다.
