react-redux 기본 개념 정리

react-redux를 연결해 주는 도구

사용 방법: Provider, useSelector, useDispatch 사용법

Provider

필요한 컴포넌트만 Provider 태그로 감싸준다.

 

useSelector

사용하고자 하는 state를 가져온다(함수를 인자로 받는다.)

예시

// App.js

...
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch, connect } from 'react-reducx';

function reducer(currentState, action) {
  if (currentState === undefined) {
    return {
      number: 1,
    };
  }
  const newState = { ...currentState };
  return newState;
}

const store = createStore(reducer);

...

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

 

useDispatch

state를 변경한다.

예시

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

...

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