React - Reducer, Dispatch, Store, Action
2023. 6. 25. 16:25ㆍMERN
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 |