react-redux hook

useSelector():

redux의 스토어에 state 트리에서 원하는 데이터 (예를들면 state)를
가져다가 쓸 수 있게 해준다. mapStateToProps()와 비슷한 기능을 한다. selecorFunc은 항상 값은 입력값에 대해 같은 반환값을 가지는 pure function이여야 한다.

(예시)

const partialState = useSelector(selectorFunc, equalityFunc?)



const CounterComponent = () => {
  const counter = useSelector((state) => state.counter.value);
  } 

useDispatch():

const dispatch = useDispatch()

redux의 action을 dispatch 해준다. 원하는 컴포넌트에서 호출해서 쓸 수 있다는 점이 다르다.

(예시)

// src/components/CounterComponent.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../redux/counterSlice';

const CounterComponent = () => {
  const counter = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment());
  };

  const handleDecrement = () => {
    dispatch(decrement());
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

useStore()
스토어에 직접적으로 접근해야 하는 경우에 쓸 수 있다. 하지만 직접적으로 접근해서 뭔가를 하는 것은 삼가토록 하고 state에 있는 데이터를 가져오려는 것이 목적이라면 useSelector를 사용하도록 한다.

(예시)

import {useStore} from 'react-redux';

function PrintStore(props) {
    const store = useStore();
    
    return <div>store.getState()</div>
}

export default PrintStore;