[포스코x코딩온] 웹 풀스택 과정 14주차 회고 | React Redux

 

📌 react에 redux 적용하기

• 모듈 설치
  npm i react-redux @reduxjs/toolkit
  ※ @reduxjs.toolkit: redux의 복잡성을 줄이기 위해 만들어진 도구

💡 Provider

• Provider를 이용하여 index.js로 store을 가져온다.
• 해당 Provider 하위에 있는 컴포넌트는 store 접근이 가능하다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./sotre";

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

💡 useSelector, useDispatch

useSelector()

• store의 상태값을 조회하기 위한 hook 함수이다.
• 함수를 인자로 넘겨주며, 해당 함수는 store의 state를 매개변수로 받을 수 있고, return 값으로 원하는 state 변수 값을 설정한다.

useDispatch()

• 액션을 발생시키는 dispatch 함수를 실행하는 hook 함수이다.
• 원하는 액션 객체를 인자로 받아 실행한다.

import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";

export default function Main() {
  const [text, setText] = useState("");
  const todos = useSelector((state) => state);
  // store의 state가 배열일 때는 이렇게 return 값 가져올 수 있다.
  // state가 { counter: 100 }과 같이 객체 형태인 경우, (state) => state.counter로 접근해야 값을 가져올 수 있다.
  const dispatch = useDispatch();
  const onSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: ADD_TODO, text });
    setText("");
  };
  const onClick = (id) => {
    dispatch({ type: DELETE_TODO, id });
  };
};

💡 redux toolkit - createSlice, configureStore

createSlice()

• 리듀서와 액션을 함께 생성하는 함수이다.

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { counter: 100 }, // state 초기값을 설정한다.
  // 사용할 액션을 정의한다. (switch문 없이 바로 함수 사용)
  reducer: {
    increment(state, action) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
    calculator(state, action) {
      console.log(action);
      const { ten, minus } = action.payload; // action의 payload로 전달받은 값을 가져올 수 있다.
      state.counter = state.counter + ten + minus;
    }
  }
});

export const counterAction = counterSlice.actions;
exports default counterSlice.reducer;

configureStore()

• redux store을 생성하기 위한 함수이다. (기존의 createStore 기능)
• configureStore을 통해 여러 리듀서를 하나로 통합하여 관리할 수 있다.

import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "./counter";
import loginSlice from "./login";

const store = configureStore({
  reducer: { count: counterSlice, login: loginSlice },
}):

export default store;