[redux-toolkit] 사용하여 상태 관리하기

redux-toolkit을 사용해보려고 한다.

설치

npm install @reduxjs/toolkit react-redux

일단 터미널에 입력을 해서 설치를 한다.

원하는 곳에 store.js 를 만들어서

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

를 입력을 한다.
(state들을 보관하는 파일)

index.js를 가보자

import store from './store.js'

import를 해오고

<Provider store={store}></Provider> 로 <App>을 감싸준다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
); 

이렇게 작성해준다.

자 이렇게 해주면 <App>과 그 모든 자식 컴포넌트들은 store.js에 있던 state를 꺼내쓸 수 있게 된다.

store.js로 가서 state를 만들어 보자.

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

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

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

createSlice()를 상단에서 import 해오고
name에 state이름을 적고 initialState에 state값을 넣어준다.
(createSlice()는 useState()와 용도가 비슷하다.)

그리고 state 등록을 해줘야한다.
작명 : createSlice()만든 변수.reducer 이렇게 하면 된다.
user(오른쪽과 똑같이 해줘도 된다.) : user.reducer

자! 이제 store.js에 있는 state를 가져다 써보자.

가져다 쓸 곳으로 가서

import { useSelector } from "react-redux"

import를 해주고

let 작명 = useSelector((state) => { return state } )
console.log(작명)

useSelector((state) => { return state }) 를 쓰면 store에 있던 모든 state가 남게 된다.

아까 만들었던 state가 출력이 된다.

let 작명 = useSelector((state) => { return state.user } )
console.log(작명)

을 하면

kim만 가져 올 수가 있다.

const state = useSelector((state) => state.user);

이런식으로 줄여도 된다.

store의 state를 변경해보자!

store.js로 가서

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

const user = createSlice({
  name : 'user',
  initialState : 'kim'
  reducers: {
  	changeName(파라미터){
    	return 'front ' + 파라미터
  }
})

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

이런 식으로 initialState 아래에 reducers를 써주고 함수를 하나 만들어준다.
나는 이름을 변경하려고 changeName로 함수를 만들어줬고 파라미터 자리 역시 작명을 해주면 된다.
파라미터를 작명하면 기존의 state가 되고
return 우측에 새로운 state를 입력하면 기존 state에서 새로운 state로 바꿔준다.

그럼 이제 changeName()을 쓰면 'front kim' 이렇게 나오게 된다.

const user = createSlice({
  name: 'user',
  initialState: 'kim',
  reducers: {
    changeName(state) {
      return 'front ' + state;
    },
    함수2() {},
  },
});

export const { changeName, 함수2 } = user.actions;

함수를 하나 더 만들고 싶으면 함수2()와 같이 아래에 만들어 주면 된다.

export const { changeName, 함수2 } = user.actions;

slice이름.actions 이라고 적으면 state 변경함수가 전부 그 자리에 출력이 된다.
그걸 변수에 저장했다가 export 하는 것이다.

변경을 하러 가보자!

import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./store.js"

store.js에서 원하는 state 변경함수를 가져오고 (changeName을 import)
useDispatch 라는 것도 import 해준다.
그리고

const dispatch = useDispatch();

를 하나 만들어주고

dispatch(changeName())

을 하게 된다면!
'front kim' 으로 변경이 된다.
(dispatch로 꼭 감싸야 한다.)

object/array 변경 방법

const user = createSlice({
  name: 'user',
  initialState: { name: 'kim', age: '29' },
  reducers: {
    changeName(state){
      state.name = 'park';
    },
    increase(state, action){
      state.age += action.payload
    },
  },
});

export const { changeName, increase } = user.actions;

이런 식으로 해주면 된다.
increase에 action 파라미터를 지정해주면 원하는 숫자로 + 할 수가 있다.
.payload를 붙여야한다. (payload 메시지 보내는 화물 느낌)

import { changeName, increase } from "./store.js"

import 해주고

dispatch(changeName())
despatch(increase(10))

파라미터에 10을 넣어주면 10 씩 더해준다.