React - Reducer, Dispatch, Store, Action

2023. 6. 25. 16:25MERN

Reducer

Reducer는 현재의 State 와 Action 을 인자로 받아 => Store(스토어)에 접근해 Action 값에 맞게 State 를 변경한다.

  • 더보기
    Action
    참고, action이란 애플리케이션에서 어떤 변화가 발생했는지를 나타내는 객체
    dispatch 함수는 이 액션을 Redux 스토어에 전달하여 리듀서 함수가 해당 액션을 처리하고 상태를 업데이트할 수 있도록 함
  • input : State & Action
  • Action 값에 따라 State를 변경

예시 -> Reducer가 state 와 action을 받고, state를 변경하는 코드

const inputReducer = (state,action)=> {
    switch(action.type){
        case "CHANGE":
            return {
                ...state,
                value:action.val,
            };
        }
        default :
            return state;
    }

 

Store

  • store는 현재 앱의 state 와 reducer 함수 +  몇 가지 내장 함수 등을 가지고 있음
    => state 를 수시로 확인해 view로 변경된 사항을 알려 줌

 

dispatch

  • React에서 dispatch는 주로 상태 관리 라이브러리인 Redux와 함께 사용됨.
  • Redux는 애플리케이션의 상태를 효율적으로 관리하기 위한 도구이며, dispatch는 액션을 디스패치하여 상태 변경을 트리거 함
  • dispatch는 store의 내장 함수 중 하나로 reducer에게 action을 발생시키라고 하는 함수
  • dispatch 함수는 "dispatch(action)" => Action을 인자로 보냄.
  • 정리 ) 굳이 쓰는 이유 => dispatch(decrement())에서 decrement()는 단순히 액션 객체를 반환하는 액션 생성자 함수.
    하지만 dispatch 함수를 사용하여 해당 액션을 전달해야 Redux 스토어에서 리듀서 함수가 호출되고 상태가 업데이트 됨
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './actions';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}
// 참고로, useSelector 훅을 사용하여 Redux의 상태(store)에서 count를 가져옴
export default Counter;

'MERN' 카테고리의 다른 글

MongoDB란 (feat. NoSQL, SQL)  (0) 2024.01.03
MERN - Express 오류 처리  (0) 2023.09.17
MERN 참고 공식 사이트  (0) 2023.09.17
BodyParser  (0) 2023.09.17
React - useEffect  (0) 2023.06.25