React | Redux toolkit

🔎 Redux
props 없이 state를 공유할 수 있게 도와주는 라이브러리

설치하기

npm install @reduxjs/toolkit react-redux

터미널에 위 명령어를 입력해서 설치한다

셋팅하기

// store.js
import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

state들을 보관할 파일인 store.js를 생성해서 위 코드를 입력해준다

// index.js
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>
); 

index.js 파일에 Provider 컴포넌트와 방금 만들어준 store 파일을 import하고, App 컴포넌트를 Provider 컴포넌트로 감싸준다

👉 App 컴포넌트를 포함한 모든 자식 컴포넌트들은 store에 있는 state들을 간편하게 꺼내쓸 수 있다

Redux store에 state 보관하기

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

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

export let {changeName} = user.actions
                       
export default configureStore({
  reducer: {
    user : user.reducer
  }
}) 

store.js 파일에 createSlice를 import한다
user state를 만들기 위해, 변수 user를 선언하고 {name: 'state이름', initialState: 'state값', reducers: {함수} }을 입력한다

다른 컴포넌트에서 함수를 사용하기 위해 slice이름.actions로 export 해준다

만들어준 state는 configureStore에 {state이름.reducer}로 등록하고, export 해준다

state 사용하기

// Cart.js
import { useDispatch, useSelector } from 'react-redux'

state를 사용할 컴포넌트에 useDispatch와 useSelector를 import 한다

// Cart.js
    let state = useSelector((state) => state)
    console.log(state)

    let dispatch = useDispatch()

state라는 변수를 선언해, useSelector로 store에 있는 모든 state들을 할당한다
위 state를 사용하기 위해, dispatch 함수를 선언한다
store.js의 함수를 사용하려면 반드시 dispatch로 감싸서 사용해야 함!

//Cart.js
import { changeName } from "./../store.js"

사용할 함수도 import 해야 한다

// Cart.js html 부분
    return (
        <div>
            {state.user.name} {state.user.age}의 장바구니
            <button onClick={() => {
                dispatch(changeName())
            }}>버튼</button>

{}안에 user state의 이름과 나이를 불러오고, 버튼을 클릭하면 changeName 함수가 실행되게 한다