[react] react-redux 사용하기

생활코딩의 react-redux (2022년 개정판) 강의를 보면서 작성한 내용입니다

https://www.youtube.com/watch?v=yjuwpf7VH74&t=716s 

 

 

react-redux를 사용하기 위해서는 먼저 두 가지를 다운받아야 합니다

npm i redux
npm i react-redux

 

 

그리고 강의에 따라 react-redux 중 Provider, useSelector, UseDispatch만 사용하도록 하겠습니다

아래의 코드를 작성해서 확인해보면 굳이 props로 전달하지 않고도 하위 컴포넌트에서 상위컴포넌트에 있는 state를 변경할 수 있습니다

import React, { useState } from "react";
import "./styles.css";
import { createStore } from "redux";
import { Provider, useSelector, useDispatch, connect } from "react-redux";
// Provider : 어떤 컴포넌트들에 제공할 것인가 + store 정의 꼭 필요함
// useSelector : 특정 컴포넌트를 선택
// useDispath : 특정 컴포넌트 내 함수에서 상위에 있는 reducer로 action 전달함

function reducer(currentState, action) {
  if (currentState === undefined) {
    return {
      number: 1
    };
  }
  const newState = { ...currentState };
  if (action.type === "PLUS") {
    newState.number++;
  }
  return newState;
}
const store = createStore(reducer);

export default function App() {
  return (
    <div id="container">
      <h1>Root</h1>
      <div id="grid">
        <Provider store={store}>
          <Left1></Left1>
          <Right1></Right1>
        </Provider>
      </div>
    </div>
  );
}

function Left1() {
  return (
    <div>
      <h1>Left1</h1>
      <Left2></Left2>
    </div>
  );
}

function Left2() {
  return (
    <div>
      <h1>Left2 : </h1>
      <Left3></Left3>
    </div>
  );
}

function Left3() {
  function f(state) {
    return state.number;
  }
  const number = useSelector((state) => state.number);
  return (
    <div>
      <h1>Left3 : {number}</h1>
    </div>
  );
}

function Right1() {
  return (
    <div>
      <h1>Right1</h1>
      <Right2></Right2>
    </div>
  );
}

function Right2() {
  return (
    <div>
      <h1>Right2</h1>
      <Right3></Right3>
    </div>
  );
}

function Right3() {
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Right3</h1>
      <input
        type="button"
        value="+"
        onClick={() => {
          dispatch({ type: "PLUS" });
        }}
      />
    </div>
  );
}

 

react-redux에 관한 자세하고 정확한 설명은 공식문서를 참고해보세요

https://react-redux.js.org/