redux-toolkit 사용방법

설치💙

npm

install @reduxjs/toolkit

 

 

 

 

설치를 하면 자동으로 redux가 따라오므로 unstall 해줘도 된다.💙

npm unstall redux 

 

 

 

 

 

createSlice 임포트하기💙

: Reducer 만드는걸 도와준다. 객체를 매개변수로 받는데 3개의 value가 필요하다.

import { createSlice} from ' @reduxjs/toolkit  '

 

 

 

 

 

3개의 value?  ( name , initialState , reducers )💙

createSlice({
               name : 'conter',
                initialState ,
           reducers : {

 

 

 

 

 

예전에 사용한 if문 swich문은 버리고 함수를 쓰게된다💙

예시 코드)

let initialState = {
 productList : [] ,
seletedItem : none
}

--

const productSlice = createSlice( {
 name : " 코딩공부", > 관련된 이름 아무거나 해도됨
initialstate,  > 위에만든변수
reduvers :  {  ->  다 함수로 이루어져있다.
 getAllProduct (state,action) { ==> getAllProduct 함수를 만들건데 그 안에 매개변수는 2개이다.
<여기서 잠깐! 설명 들어갑니다 >
  예전에는 우리가 retrun 을 해주고 ...state를 사용 했는데 redux toolkit은? 그게 필요없어짐createSlice 얘가 다해줌

state.productList = action. payload.data > 그대로 해석하자면 initialState(state)에 있는 productList 의 값을
                                                                    action의 patload의 data 값으로 바꿔주세요~
},
getSingleProduct (state,action){
 state.seletedItem = action.payload.data; 
}
} )

 

 

export 를 할때는?💙

createSlice({
               name : 'conter',
                initialState ,
           reducers : {

할때 우리는 거의 reducers을 꺼내 쓰고 싶을 것 이다.
단!

export default productSlice.reducer  이렇게 쓰게된다. reducers 가 아니다

왜? 마지막엔 하나의 큰 reducer 이기때문이다...> 걍 이렇게알고 쓰자

 

 

 

 

 

 

store .js 에서  해줘야 할일 configrueStore  왜해? 리덕스 최신버전은 creatstore이 줄이 가있다.

새로운걸 쓰기위해! configrueStore 써야함💙

 

Reducer .js

import { configureStore  } from " '  @reduxjs/toolkit  '
import productReducer from ' ./ reducers/productReducer "
import authenticateReducer from "./reducers/authenticateReducer "

const store = configureStore{
 reducer :{
auth : authenticateReducer,
product : productReducer ,
}

export default store ; 

 

 

action dispatch를 어떻게 할까?💙

 

productAction .js

이전 dispatch

dispatch ( {type: "이름" , payload : { data }} );

이후 dispatch
createSlice 에 있는 action값을 불러와야 한다. 해서 Reducer에

export const product Action = productSlice.actions  을 해야한다.

그러면?
import { productAction} from "../ reducers/ productReducer " 
dispatch( product Action . getAllProducts()  ) 이런식으로 우리가 작성한함수를 불러올 수 있다.

그럼 payload는  어떻게 전달하나요?

dispatch( product Action . getAllProducts(요기) 

알아서 payload 작성안해도 되고 알아서 데이터를 적으면 페이로드 아래에 들어가게 된다.

 

 

---

 

어렵다...하지만 이렇게 또 하나 알아가면 더편리하게  사용할 수 있겠지