Redux toolkit

Wonhyo LEE·2023년 1월 31일
0

리덕스는 하나의 스토어를 가지고 있습니다.
그 스토어에서 상태 관리를 해주는 것이 목적인데요

Action의 type과 payload를 이벤트에 설정하고 Dispatch를 통해 Store에 접근하게 됩니다.
그렇게 접근된 Action 값은 Reducer 안에 Action.type을 통해 정해진 로직이 실행됩니다.
그렇게 실행되어 변경된 스테이트를 다시 전역에 보내주게 됩니다.

redux에서는 오직 하나의 Reducer만이 존재합니다.
실무에서는 유지 보수를 위해 여러 개의 리듀스를 만든 뒤에 하나의 루트 리드 서로 병합하는데
그때 사용하는 것이 root reducer입니다.

Redux toolki 은 configureStore를 사용하여 스토어를 생성합니다.(기존에는 creatstore)
또한 Reducer를 사용하는 것이 아닌 createSlice를 사용합니다.
createSlice 안에 객체 값으로 name(슬라이스의 이름),initialState(초기 상태),reducers(액션값) 를 받게됩니다.

Redux

// 이전 reducer
const reducer = (prevState, action) => {
 switch (action.type) {
   case "LOG_IN":
     return {
       ...prevState,
       isLogIn: true,
       userId: action.data.userId,
       data: action.data
     };

Redux toolkit

// toolkit의 slice
export const counterSlice = createSlice({  // 2.
 name: 'counter', // 3.
 initialState: {   // 4.
   value: 0,
 },
 reducers: {  // 5.
   increment: (state) => {
     state.value += 1;
   },
profile
프론트마스터를 꿈꾸는...

0개의 댓글