React Redux

공식 문서 참조

1. Provider
   앱의 나머지 부분에서 Redux 스토어를 사용할 수 있도록 하는 구성 요소
   랜더링 하는 전체 부분을 Provider로 감싼다.

import { Provider } from 'react-redux'
import store from './store'

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

이렇게 하면 App에서 store 사용 가능

2. useSelector
   getState() 와 같은 역할을 하며, 현재 state를 가져온다

const currentState = useSelector((state) => state);

3. useDispatch
   redux 스토어의 dispatch 함수에 대한 참조를 반환하는 훅입니다. 이를 통해 애플리케이션 상태를 업데이트하고 해당 상태에 대한 변경 사항을 구독하는 React 컴포넌트를 다시 렌더링하는 작업을 트리거하는 액션을 스토어에 디스패치할 수 있습니다. 다른 말로 하면, useDispatch는 애플리케이션 상태를 업데이트하고 리덕스 스토어와 상호작용하는 방법입니다.

const dispatch = useDispatch();

const btnOnClick = (e) => {
    const targetId = parseInt(e.target.parentNode.id);
    dispatch(deleteToDo(targetId)); //전달할 액션
  };