[React] Redux Toolkit

Redux Toolkit

: 기존 Redux의 개선 버전으로 조금 더 쉽게 사용 할 수 있도록 만들어졌습니다.

Redux Toolkit을 사용하기 위해선 React, React-dom의 버전이 18 이상이어야 합니다.

초기 셋팅

Step 1

store.js 파일을 생성하여 다음과 같이 작성합니다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

store.js는 상태들을 보관하는 저장소입니다.

Step 2

Index.js에서 Provider를 import 해옵니다.
그리고 import해온 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에 저장되어 있는 상태에 접근이 가능합니다.

Store에 상태 저장하기

우선 stors.js에서 createSlice를 import해옵니다.
import해온 createSlice()를 변수에 할당하는 방식으로 상태를 만들어 줄 수 있습니다.

createSlice()의 인자로는 name과 initialState라는 키를 가진 객체가 들어갑니다. name의 값은 상태의 이름을 뜻하고, initialState의 값은 상태의 초기값입니다.

이를 보았을 때 createSlice()의 역할은 useState()와 비슷하다고 볼 수 있습니다.

let user = createSlice({
	name : "user",
    initialState : "Heo",
})

이렇게 createSlice()를 사용해서 만든 상태를 export 해주어야 다른 컴포넌트에서 사용 할 수 있게 됩니다.

비어있는 reducer 객체에 { 마음대로작성 : 상태 이름.reducer} 형식으로 작성해주면 됩니다.

다른 컴포넌트에서 상태 불러오기

우선 useSelector를 import 해온 뒤에 다음과 같은 문법으로 불러옵니다.

let firstState = useSelector((state) => state)

이렇게 되면 firstState엔 store에 있는 모든 상태가 담기게 됩니다.

상태 변경하기

1. store.js안에 상태 변겅 함수부터 만들어주어야합니다.

let user = createSlice({
	name : "user",
    initialState : "Heo",
  	reducers : {
      setState(state) {
        return 'Kim';
      }
    }
})

2. 만들어진 상태 변경 함수를 export 해줍니다.

export let { setState } = user.actions;

3. 상태 변경 함수를 사용하려는 컴포넌트에서 useDispatch와 상태 변경 함수를 import를 해줍니다.
   그 후에 다음과 같이 dispatch를 실행시키면 상태가 업데이트 됩니다.

let dispatch = useDispatch();
dispatch(setState());