저번에 Redux를 적용한 todolist에 toolkit을 적용해보려고 한다.
왜냐면 모듈 부분의 코드가 너무 많아졌기 때문이다... ^_^
store 부분
createStore와 combineReducers가 사라지고 configureStore가 생겼다.
18번 줄의 configureStore를 보면, reducer가 들어가있고 그 안에 reducer들을 넣을 수 있게 되어있는데, 그 말은 configureStore는 사라진 두개의 코드 역할을 대신한다는 뜻이다.
middleware: [thunk] 부분이 없으면 에러가 생긴다. thunk는 비동기처리를 도와주는데 persist를 사용하면서 thunk를 사용하지 않으면 생기는 오류같다.
Provider 부분
tooltik의 적용 전과 후가 같다.
건드릴 게 없다.
모듈 부분
모듈 부분이 가장 많이 바뀌었다.
action을 만들어 주는 코드(action creator)가 사라졌고,
휴먼 에러를 방지하는 코드들도 사라졌다.
사라진 코드들은 다 reducer안에 들어간다.
Toolkit의 reducer는 createSlice로 만들어진다.
그 안의 name은 reducer의 이름을 정한다.
initialState는 redux의 저장소를 가리키며,
reducer 안에 나머지들이 들어간다.
dipatch에, reducer 안의 addTodo 같은 함수들을 담고
그 함수 안에 payload를 담아서 reducer에게 보낸 후 실행하는 방식이다.
addTodo 등의 함수의 파라미터로 state와 action을 받는데, action을 받기 위해선 export를 해줘야 하며, 아래쪽의 export const todoActions = todoReducer.actions; 가 그 부분이다.
그리고 export default로 todoReducer.reducer를 내보낸다.
dispatch 부분
다 볼 필요없이 dispatch 부분만 보면 된다.
기존에는 dispatch(deleteTodo(Number(event.target.id))); 로 보냈지만,
toolkit을 사용할 때의 dispatch는 todoActions를 붙인다.
reducer안에 있는 action들 중 deleteTodo에게 보낸다는 의미.
toolkit을 사용하니, 확실히 코드량도 줄었고, 가독성도 좋아졌다.
