[React] useReducer

JIOO·2024년 3월 4일
0

React

목록 보기
16/18

📄 일단 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는
동기라서 그냥 여러개를 쓰면 된다

profile
프론트엔드가 좋은 웹쟁이

0개의 댓글