redux-toolkit

이글은 리덕스 툴킷의 가장 기본적인 세팅을 저장해 두기 위한 글입니다.

npm install @reduxjs/toolkit react-redux

install 후

import { Provider } from "react-redux"
import store from "./store/store"


 <Provider store={store}>
    <React.StrictMode>
        <App />
    </React.StrictMode>
  </Provider>

store.js

import { configureStore } from "@reduxjs/toolkit"
import { user, cart, stock } from "./userSlice"

export default configureStore({
  reducer: {
    user: user.reducer,
    stock: stock.reducer,
    cart: cart.reducer,
  },
})

store.js는 userslice에서 받는 값은 reducer에 넣어서 반환 하기만 해주면 된다.
사실 store.js 와 userslice.js 를 같이 사용해도 되지만 이 방법이 가독성이 더 좋기 때문에
이방법을 추천한다.

userSlice.js

import { createSlice } from "@reduxjs/toolkit"

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

let cart = createSlice({
  name: "cart",
  initialState: [
    { id: 0, name: "White and Black", count: 2 },
    { id: 2, name: "Grey Yordan", count: 1 },
  ],
  reducers: {
    changeCount(state, action) {
      let findNum = state.findIndex((a) => {
        return a.id === action.payload
      })
      state[findNum].count++
    },
    addItem(state, action) {
      state.push(action.payload)
    },
  },
})

let stock = createSlice({
  name: "stock",
  initialState: [10, 11, 12],
})

export let { changeName, changeage } = user.actions
export let { changeCount, addItem } = cart.actions

export { user, cart, stock }

userSlice가 중요한데 특정 변수 안에 createSlice를 사용해 name,initialState,reducers
를 사용한다. name은 원하는 이름을 넣어도 상관없지만 보통 변수와 통일 시킨다.

initialState는 원하는 값을 넣어주면 된다.(array,object,string,number 등등 다 가능하다) reducer은 initialState는를 수정하고 싶은 경우 사용하면 되는데 파라미터로 state,action을 받는다.

state는 현재값 action은 외부에서 받는 값을 뜻한다.(action을 사용할 경우 뒤에 .payload를 붙어야된다.)
그 후 export let { changeName, changeage } = user.actions 이런 방식으로
따로 빼주면 되는데 꼭 해당 변수뒤에 .action을 붙여야된다.

그 후 사용하고 싶은 createSlice를 포함하는 변수를 export해주면 기본적인 세팅이 끝난다.

그 후 store.js에 user을 쓰고 싶다면 user: user.reducer처럼 넣어주면 된다.

이러한 세팅 후 필요한 페이지에서 사용하는 방법을 보자면

import { useSelector, useDispatch } from "react-redux"
import { changeName, changeage, changeCount, addItem } from "./store/userSlice"

function App() {
  let state = useSelector((state) => {
    return state
  })
  let dispatch = useDispatch()
  }

export default App

<button onClick={() => {dispatch(changeage(11))}}>나이 더하기</button>
<div>{state.user.age}</div>

위와 같은 방법으로 사용하면된다.
1.기본적으로 useSelector를 import한 후에 특정 변수에 담아서 해당 state를 return하여 사용한다. 하지만 전체가 아닌 필요한 데이터만 쓰고 싶을 경우 state.user처럼 더 자세히 return해줄 수도 있다.

그 후 해당값은<div>{state.user.age}</div>이런 방식으로 사용 가능하다.

2. redux-toolkit 함수 사용 법은 더욱더 간단하다.

let dispatch = useDispatch()

이러한 방법으로 변수에 넣은 뒤

<button onClick={() => {dispatch(changeage(11))}}>나이 더하기</button>

이렇게 사용하면된다 그럼 해당 버튼을 누를 때마다 changeage가 사용되고 argument로 11이 들어가게 된다 여기서 11은 해당함수가 정의된 userSlice.js에서 action이 된다.