리덕스는, 가장 사용률이 높은 상태관리 라이브러리
컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리
컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달
단, Redux가 무조건 해답은 아니고 Context API로도 대체 가능함!
{
type: "TOGGLE_VALUE"
}
{
type: "ADD_TODO",
data: {
id: 0,
text: "리덕스 배우기"
}
}
{
type: "CHANGE_INPUT",
text: "안ㄴ"
}
function addTodo(data) {
return {
type: "ADD_TODO",
data
};
}
// 화살표 함수로도 만들 수 있습니다.
const changeInput = text => ({
type: "CHANGE_INPUT",
text
});
function reducer(state, action) {
// 상태 업데이트 로직
return alteredState;
}
하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용
여러개의 스토어를 사용하는것은 사실 가능하기는 하나, 권장되지는 않습니다.
특정 업데이트가 너무 빈번하게 일어나거나, 애플리케이션의 특정 부분을 완전히 분리시키게 될 때 여러개의 스토어를 만들 수도 있습니다. 하지만 그렇게 하면, 개발 도구를 활용하지 못하게 됩니다.
리액트에서 state 를 업데이트 해야 할 때, setState 를 사용하고, 배열을 업데이트 해야 할 때는 배열 자체에 push 를 직접 하지 않고, concat 같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 합니다. 엄청 깊은 구조로 되어있는 객체를 업데이트를 할 때도 마찬가지로, 기존의 객체는 건들이지 않고 Object.assign 을 사용하거나 spread 연산자 (...) 를 사용하여 업데이트 하는 것 처럼 리덕스에서도 마찬가지로 기존의 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트 해주는 방식으로 해주면, 나중에 개발자 도구를 통해서 뒤로 돌릴 수도 있고 다시 앞으로 돌릴 수도 있음
- 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받음
- 이전의 상태는 절대로 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환
- new Date 처럼 호출 시 마다 매번 달라지는 값이 아닌 항상 같은 결과값을 반환!!!
npm install --save redux react-redux