React 에서 Redux 사용하기

Store폴더

• src/store 를 만들어 리덕스 관련 코드파일은 여기에 작성한다.
• index.js를 만들어 리듀서 함수와 스토어를 만든다.

import { createStore } from "redux";
const initialState = {
  counter: 0,
};

const counterReducer = (state = initialState, action) => {
  if (action.type === "increment") {
    return { counter: state.counter + 1 };
  } else if (action.type === "decrement") {
    return { counter: state.counter - 1 };
  } else {
    return state;
  }
};

const store = createStore(counterReducer);
//createStore는 더이상 안씀

//생성한 리듀서와 store를 컴포넌트와 연결하려면 export하면됨

export default store;

root/index.js

• export 까지 끝나면, 리액트 컴포넌트와 연결해주면된다.
• 리액트 저장소에 store를 제공하기위해 리액트의 최상단 index.js 에서 임포트한다.

//index.js

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  // Provider로 컴포넌트를 감싸주고 store={store}로 받아온다.
  <Provider store={store}>
    <App />
  </Provider>
);

• 이렇게 설정하면 작성한 리듀서함수를 모든 컴포넌트(App컴포넌트,하위컴포넌트)에 사용 가능하다.

useSelector

• 컴포넌트에서 Store 를 액세스 하려면
  import { useSelector } from "react-redux";

• 를 작성하면된다.
  (useStore 훅도 있는데 useSelector 가 더 사용하기 편함)

• connect : 는 클래스컴포넌트에서 사용한다.

• const counter = useSelector((state) => state.counter);

• 관리된 데이터를 콜백함수로 적고, 코드를 실행해서 컴포넌트에서 필요한 상태부분을 받는다.

• useSelector 로 인해 store 에 데이터가 변경 될 때 마다 자동으로 업데이트되고 최신 값을 받게 된다.

• 값이 바뀌면 컴포넌트 함수가 리렌더링 됨.

• 컴포넌트를 unmount 하면 리덕스에서 자동으로 구독을 해지함.

잠깐!

• useSelector 는 자동으로 데이터가 변경을 감지해서 컴포넌트 함수를 리 렌더링 한다

  const state = useSelector((state) => state);
  const name = state.User.name;
  const age = state.User.age;
  const address = state.User.address;

이런식으로 작성하게 된다면.. name의 값이 바껴도 age와 address가 리렌더링 된다
최적화의 실패이기 때문에

• 이런식으로 작성해줘야한다

  const name = useSelector((state) => state.User.name);
  const age = useSelector((state) => state.User.age);
  const address = useSelector((state) => state.User.address);
// 리팩토링
  const { name, age, address } = useSelector((state) => state.User);

Store 에서 값을 저장하고 가져와서사용하는건 useSelector이다

컴포넌트에서 Action을 dispatch 하기 !

• 내부컴포넌트에서 데이터변경을 요청 하려면 useDispatch를 이용한다
• import {useDispatch} from 'react-redux'
• const dispatch = useDispatch();
• 작성후 dispatch를 handle할 수 있는 함수를 작성한다

  const incrementHandler = () => {
    dispatch({ type: "increment" });
  };
  const decrementHandler = () => {
    dispatch({ type: "decrement" });
  };

• 그리고 버튼에 연결시키면 끝 !

정리!

• src/index.js 에 해당하는 리듀서 함수와 initialState 작성한다.
• createStore(리듀서함수)를 export한다.
• root index.js 에서 Provider를 import 한다.
• 리듀서를 원하는 컴포넌트에 가서 useSelector와 useDispatch 를 가져온다.
• useSelector 로 state값을 가져오고
• dispatch(액션)을 함수로 작성후 onClick으로 연결한다. !