풀스택 웹개발 부트캠프 14주차 (3)

React-Redux

redux 사용

• 모듈 설치

npm i redux react-redux @reduxjs/toolkit

• @reduxjs/toolkit
  • Redux의 복잡성을 줄이기 위해 만들어진 도구
  • action 생성, reducer, 미들 웨어 등 redux와 관련된 기능들을 효율적으로 구현
• 리액트에 적용

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

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

useSelector

• redux store의 state를 조회하는 hook 함수
• 인자로 콜백함수를 넘겨주어야 함
• 콜백함수의 매개변수로 state를 받을 수 있고, return 값은 원하는 state 변수 값 설정
• 자동으로 subscribe를 하고 있으므로 데이터가 변경되면 컴포넌트 재실행
• store.getState( ), subscribe( ) 등을 사용하지 않아도 됨
• reducer 여러 개를 합쳐서 내보내면, useSelector의 콜백함수에서 state로 바로 접근 ❌
  reducer의 key 값 → state 순서로 접근 ⭕
  → state.counter.number와 같이 state에 접근해야 함

import { useSelector } from "react-redux";

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

useDispatch

• action을 발생시키는 dispatch 함수를 실행하는 hook 함수
• 인자로 원하는 action 객체를 넘겨주어야 함
• dispatch : 우리가 호출할 수 있는 함수

import { useDispatch } from "react-redux";

const dispatch = useDispatch();

<button onClick={()=>{dispatch({type:"INCREASE"})}}>+1</button>
<button onClick={()=>{dispatch({type:"DECREASE"})}}>-1</button>

Redux Toolkit

createSlice

• reducer와 action을 함께 생성하는 함수
• slice라는 개념을 사용하여 action type, action 생성 함수, reducer를 한 번에 정의

// store/conter.js
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { number: 0 },
  reducers: {
    increment(state, action) {
      state.number++;
    },
    decrement(state) {
      state.number--;
    },
    plus(state, action) {
      state.counter = state.counter + action.payload;
    },
  },
});

export const counterAction = counterSlice.actions;

export default counterSlice.reducer;

configureStore

• redux store를 생성하기 위한 함수
• 여러 미들웨어와 reducer를 쉽게 통합할 수 있음
• Redux DevTools 확장 프로그램과의 통합 제공

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

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

export default store;