📄 일단 useReducer은 코드 작성법은 redux의 reducer랑 거의 흡사함
데이터를 넣고 빼고는 같고 데이터를 부르는 거만 다름
useReducer 사용법
const initialState = {초기값들}
//초기값
//타입
const typeObject = {
editorSwitch: "editorSwitch",
todoList: "todoList",
success: "success",
issue: "issue",
profile: "profile",
Mount: "Mount",
updateTodo: "updateTodo",
calendarArr: "calendarArr",
reset: "finishReset",
};
//타입
// 디스패치 함수
export const update = (data: todoItem[]) => ({
type: typeObject.updateTodo,
data,
});
// 디스패치 함수
------------------------------------------------------
const reducer = (state,action) => {
switch(action.type) {
case "타입":
return {
// redux 하듯이
바꿀값 : [...원래값, action.payload]
}
default:
return state
}
}
const [state1,dispatch] = useReducer(reducer,initialState)
<p>{state1}</p> // 데이터를 불러올 땐 그냥 state1를 쓰면 됨
<button onclick="dispatch(함수명(데이터))"></button>
굳이 차이점이 있다면
batch(() => {
dispatch(successDate(DateFac));
dispatch(update(clearArr));
});
리덕스는 디스패치를 여러개 쓸 때 이렇게 batch를 써야되지만 useReducer의 dispatch는
동기라서 그냥 여러개를 쓰면 된다