React : Redux Toolkit thunk

Redux Toolkit thunk 

: 프로젝트를 시작하면서 더 깊게 비동기 작업에 대해 공부가 필요하여 작성하게 되었다.

Redux Toolkit은 사용해 보았으나 thunk 하니까..응? 뭐지 하고 기억이 없다보니 빠르게 공부를 해봐야겠다.

찾아보니 내가 평소 사용한 useEffect 기능을 이용하여 비동기 작업을 처리한것 이였는데 다른 방법이 있어 적어보려 한다.

---

• Redux Toolkt에는 내부적으로 thunk를 내장하고 있어 다른 미들웨어를 사용하지 않고 비동기 처리가 가능하다. 
• Redux Toolkit의 비동기 처리 기능을 사용하지 않고 컴포넌트 내부의 useEffect 에서 api 호출 하는 것도 가능하다.
• 다만, Redux Toolkit 의 비동기 기능을 사용하면, 컴포넌트 외부에서 비동기 처리를 할 수 있기 때문에 관심사 분리가 가능하다는 장점이 있다고 한다.
• createAsyncThunk 와 createSlice를 사용하여 Redux Toolkit만으로도 비동기 처리를 쉽게 할 수 있으며
• redux-saga 에서만 사용할 수 있던 기능 ( 이미 호출한 api 요청 취소하기 등 ) 까지 사용할 수 있다.

 

 

핵심은 그래서 뭔데?

 

useSlice.js

import { createSlice } from "@reduxjs/toolkit"

let products = createSlice({
  name:'products',
  initialState:[],
reducers :{
  pluscount(state,action){
   let index = state.findIndex((item)=> item.id === action.payload)
   if(index >= 0){
    state[index].count++
   }},

  }
})

export let {pluscount} = products.actions
export default products;

store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'
import products from './store/userSlice'




// configureStore 에는 combinereducer / thunk / applyMiddleware / composeWithDevTools 가 포함되어 있다.
export default configureStore({
  reducer: { 
    products : products.reducer,
 

  }
})

🔥 핵심은 이부분인데 예전 리덕스 버전에는 미들웨어 thunk를 작성해야했던 반면

configureStore에는 주석에 작성한 부분이 다 들어가져 있기때문에 간단하게 작성이 가능했다.

리덕스 Provider을 가져와 store={store} 을 APP을 감싸주면 된다.

 

slice 에 있는 부분을 가져다 쓸때는 useSelector로 사용하면 된다.

dispatch를 사용해 slice에 작성한 함수명 pluscount를 작성후 매개변수로는 값을 보내주면 된다.