Redux-Toolkit

목적

리덕스 툴킷은 표준화된 리덕스 로직을 작성하도록 의도되어졌습니다.

리덕스에 대한 세 가지 일반적인 우려를 처리하기 위해 만들어졌습니다.

• 리덕스 스토어를 구성하는데 너무 복잡하다.
• 리덕스를 유용하게 사용하기 위해서는 너무 많은 패키지들을 설치해야 한다.
• 리덕스는 너무 많은 보일러플레이트 코드를 필요로 한다.

 

 

ConfigureStore

---

configureStore()는 이제 createStore를 포함합니다.

그것은 자동적으로 분해된 리듀서들을 결합시켜줄 수 있습니다. 

리덕스 미들웨어도 추가 할 수 있으며 redux-thunk 가 기본으로 포함되고 

Redux Devtools Extension의 사용이 가능합니다.

import {configureStore} from '@reduxjs/toolkit'
import userReducer from './userSlice'
export default configureStore({
    reducer: {
        user: userReducer,
    }
})

 

 

CreateSlice

---

createSlice()는 리듀서 함수의 객체를 받습니다.

객체에는 slice name, 그리고 initial state value, 그리고 액션 생성자와 액션 타입들에 해당하는 slice reducer를 만들어냅니다. 

import {createSlice} from '@reduxjs/toolkit'

export const userSlice = createSlice({
    name: 'user',
    initialState:{
        name: "heedo",
        email: "heedo@naver.com"
    },
    reducers:{
        //액션함수에 따른 state 변경이 이루어지는 곳
        // action.payload.name 은 dispatch({name})을 통해서 값이 들어오고 
        // state.name = action.payload.name을 통해서 state 값 변경
        update: (state,action) => {
            state.name = action.payload.name //dispatch({name, email}) 을 통해서 state값이 수정됨.
            state.email = action.payload.email
        },
        remove: (state) => (state = {}), //state를 비우고 싶을때
        addHello: (state, action) =>{
            state.name = 'Hello ' + action.payload.name;
        }
    }
})

export const {update,remove,addHello} = userSlice.actions; // 액션함수 내보내기
export default userSlice.reducer;

 

 

CreateAsyncThunk

---

이제 아래와 같이 기존 리듀서와 같이 어떤 액션 타입에 대한 코드 작성을 일일히 해줄 필요가 없습니다.

export const LOAD_CART_PRODUCTS_REQUEST = 'LOAD_CART_PRODUCTS_REQUEST' 
export const LOAD_CART_PRODUCTS_SUCCESS = 'LOAD_CART_PRODUCTS_SUCCESS' 
export const LOAD_CART_PRODUCTS_FAILURE = 'LOAD_CART_PRODUCTS_FAILURE' 

switch (action.type) {
case LOAD_CART_PRODUCTS_REQUEST:
        draft.loadCartProductsLoading = true;
        draft.loadCartProductsDone = false;
        draft.loadCartProductsError = null;
        break;
      case LOAD_CART_PRODUCTS_SUCCESS:
        draft.loadCartProductsLoading = false;
        draft.loadCartProductsDone = true;
        draft.userCart = action.data;
        break;

      case LOAD_CART_PRODUCTS_FAILURE:
        draft.loadCartProductsLoading = false;
        draft.loadCartProductsDone = false;
        draft.loadCartProductsError = action.error;
        break;
        
        ...

 

createAsyncThunk는 액션 타입문자열과 promise를 반환하는 함수를 받습니다.

그리고 pending/fulfilled/rejected 액션 타입을 dispatch 하는 thunk를 만들어냅니다.

import {createAsyncThunk,createSlice} from '@reduxjs/toolkit'
import axios from 'axios';

export const updateUser2 = createAsyncThunk("userInfo/update", async (user) => {
    const res = await axios.post('http://localhost:8080/api/users/1/update',user);
    return res.data
})
export const userSlice = createSlice({
    name: 'user',
    initialState:{
        userInfo: {
            name: "heedo",
            email: "heedo@naver.com"
        },
        loading: false,
        done: false,
        error: false,

    },
    reducers:{},
    extraReducers:{
        [updateUser2.pending]: (state) => {
            state.loading = true
            state.done = false
            state.error = false
        },
        [updateUser2.fulfilled]: (state,action) => {
            state.loading = false
            state.done = true
            state.userInfo = action.payload
        },
        [updateUser2.rejected]: (state) => {
            state.loading = false
            state.done = false
            state.error = true
        },
    },
})

export default userSlice.reducer;

 

 

pending은 액션에 대한 요청

fulfilled는 비동기작업 성공

rejected는 비동기작업 실패

액션 타입으로 이해하면 됩니다.

userInfo/update 뒤에 pending과 fulfilled가 붙는 것을 확인하세요.