[React] Redux 사용법(Redux toolkit)

Redux 쓰면 뭐가좋냐

출처: 코딩애플

저런식으로 redux를 사용하면 store라는 공간에 데이터를 저장하고 각 컴포넌트에서 store에 있는 데이터를 꺼내간다. 그렇게 되면

1. 일단 props 전송이 필요없어진다.
2. store.js로 가서 확인하면 되기때문에 관리가 용이하다(각 컴포넌트에 props로 관리 시 각 컴포넌트를 디버깅해야됨)

반면에 코드가 길어지고 관리법이 좀 더 복잡해지기때문에, 컴포넌트가 몇 개 없는 크기의 프로젝트라면 그냥 props 쓰는게 더 코드가 짧고 편할 수 있다.

Redux store에 state 보관

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
  name : 'user',
  initialState : 'kim'
})

export default configureStore({
  reducer: {
    user : user.reducer
  }
}) 

1. createSlice()로 state만들고
2. configureStore() 안에 등록하면됨

그리고 가져다 쓸땐

(Cart.js)

import { useSelector } from "react-redux"

function Cart(){
  let a = useSelector((state) => { return state } )
  console.log(a)

  return (생략)
}

useSelector를 사용하면됨
그리고 참고로 useSelector 안에 return 되는 state는 store에 보관된 모든 state를 포함함 따라서 특정 state만 필요한 경우엔

let userBasket = useSelector((state) => state.userBasket);

저렇게 필요한 애만 빼오면 된다.

Redux의 state를 변경하고 싶으면?

3step을 밟아야 한다.

1. store.js에 state 변경해주는 함수를 만들고
2. export 해두고
3. 필용할때 import해서 dispatch로 감싸서 써야한다.

let user = createSlice({
  name: "user",
  initialState: { name: "kim", age: 20 },
  reducers: {
    changeName(state) {
      state.name = "park";
    },
    changeAge(state, action) {
      state.age += action.payload;
    },
  },
});

저렇게 reducers안에다가 변경함수를 만들어준다.
저때 state는 변경 이전의 state, action은 action.payload를 통해 함수 호출시 전달된 파라미터를 받을 수 있다.

export let { changeName, changeAge } = user.actions;

이후 export

onClick={() => {
	dispatch(changeAge(3));
}}

이후 필요한 곳에서 dispatch를 통해 변경함수 호출 및 파라미터 전달을 해주면 된다.

이 역시 store.js에 있는 함수로 변경하는 이유는

출처 : 코딩애플

저렇게 하다 버그가 발생하면? 저 각각의 컴포넌트 다 뒤져야한다.

출처 : 코딩애플

근데 이렇게 공손하게 부탁하면?
범인은 무조건 store.js다, 거기만 찾으면 됨.

이렇게 오류발생시 디버깅이 용이하도록 store.js를 통해 변경함수를 작성한다.

array/object

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    }
  }
}) 

array나 object 변경함수 작성 시 저렇게 return문 없이 편리하게 변경이 가능하다.
그래서 데이터가 하나뿐이여도 보통 object 형태로 저장하여 관리한다.

참고: 이건 Redux toolkit의 사용법

Redux 만든사람이 이제 원래 Redux의 사용법을 편리하게 하고자 새로 만든 라이브러리임, Redux만든 사람이 toolkit 사용을 권장한다하니 toolkit으로 가보즈아