[React] Redux
in Study on Redux
기본 개념
Action
어플리케이션의 store, 즉 저장소로 data를 보내는 방법입니다. view에서 정의되어 있는 액션을 호출하면 action creators(액션 생성자)는 어플리케이션의 state를 변경해 줍니다.
const ADD_TODO = "ADD_TODO"; // action의 type을 정의
정의된 action type은 action creators를 통해 사용됩니다.
function addTodo(text) {
return {
type: ADD_TODO,
text,
};
}
Reduces
action을 통해 어떠한 행동을 정의했다면, 그 결과 어플리케이션의 상태가 어떻게 바뀌는지 특정하는 함수, 항상 순수 함수여야 한다.
function todoApp(state = initState, action) {
switch (action.type) {
case SET_VISIBELITY_FILTER:
return Object.assing({}, state, {
visible: action.filter,
});
default:
return state;
}
}
리듀서 함수에서는 action의 type에 따라 변화된 state를 반환
Store
무엇이 일어날지를 나타내는 action, 그리고 action에 따라 상태를 수정하는 reducer를 저장하는 어플리케이션에 있는 단하나의 객체입니다. reducer에 의해서만 변경이
언제 Redux를 사용할까?
- 리덕스를 사용한 개발 스타일이 너무 마음에 들 때
- 미들웨어
- 서버사이드 렌더링
- 더쉬운 테스팅
- 컴포넌트가 아닌 고셍서 글로벌 상태를 사용하거나 업데이트를 해야 할 때
Redux의 세 가지 규칙
- 스토어는 단 한개
- state는 읽기 전용
- 변화는 순수 함수로 구성