주요개념
상태를 어떻게 변화시킬건지에 대한 정보를 가지고 있는 객체
{
type: "액션의 종류를 알 수 있는 문자열",
payload: "액션의 실행에 필요한 데이터",
}
액션을 리턴하는 함수
리듀서
현재상태와 액션을 받아 새로운 상태를 리턴하여 현재 상태를 덮어씌운다.
스토어
현재상태, 리듀서 등을 가지고 있다.
디스패치
액션을 생성하게 하여 상태를 변화시킨다.
store 내장 함수중 하나
action 이 dispatch 될 때마다 호출된다.
즉 store 의 상태가 변경될 때마다 호출된다.
사실 subscribe(callback) 에서 callback 함수가 상태가 변경 될때마다 호출된다.
구독을 해제하고 싶으면 subscribe 의 리턴값을 호출하면 된다.
cf> 리액트에서는 react-redux 에서 상태변경을 추적관리 해줘서 필요없다.
const listener = () => {
console.log('상태변경됨!')
}
const unsubscribe = store.subscribe(listener)
unsubscribe();
리덕스의 세가지 규칙
단일스토어
한 app 에는 스토어가 1개 여야 함
immutable
리덕스에서 상태가 변경되었는지 판단할 때 상태data 전체를 일일히 비교해서 확인하지 않기 때문에 immutable 한 상태를 유지시켜줘야 한다.
또한 상태를 변경할 때는 새로운 상태로 덮어씌워줘야 상태가 변경된 것을 리덕스에서 확인할 수 있다.
const arr1 = [1,2,3]
const arr2 = arr1;
const arr3 = [...arr1];
console.log(arr1===arr2) // true
console.log(arr1===arr3) // false
pure function
- reducer 는 input 값이 같으면 output 이 항상 똑같아야 한다.
- random, new Date() 등을 reducer 안에 넣으면 안된다.
참고
web-developer