리덕스란?
Redux의 공식 문서에서, 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.설명했다.
약간 더 간단한 설명을 추가하자면 Redux는 복잡한 state 관리 집중사용하기 쉽게
이것은 도움이 될 JavaScript 라이브러리입니다.
Redux를 구성하는 키워드
- 컴퓨터에 저장
- 행동
- 배송하다
- 감속기
- 구독하다
1. 저장
Redux에서는 상점을 만들고 이 상점에서 현재 state와우, 감속기를 분출하십시오.
또한 상점에는 몇 가지 추가 내장 기능이 있습니다.
상점의 상태를 바꾸는 것은 Redux의 핵심입니다.
두 번째 행동
state무언가를 변경해야 할 때 작업을 트리거합니다.
이것은 하나의 객체로 표현되며 action 객체는 다음과 같은 형식을 가집니다.
{
type: "TOGGLE_VALUE" // 액션 객체는 type을 필수적으로 가지고 있어야하고, 그 외의 값들은 개발자 마음대로 넣어줄 수 있다.
}예
{
type:'CHANGE_COLOR',
color: 'red'
}{
type: "ADD_TODO",
data: {
id: 0,
text: "리덕스 배우기"
}
}액션 빌더 함수를 생성하여 액션을 사용할 수도 있습니다.
그 이유는 구성 요소의 이후 작업이 더 쉽게 트리거될 수 있기 때문입니다.
액션 생성 함수를 사용할 필요가 없습니다.
export function addTodo(data) {
return {
type: "ADD_TODO",
data
};
}
// 화살표 함수로도 만들 수 있습니다.
export const changeInput = text => ({
type: "CHANGE_INPUT",
text
});3. 배송
배송은 상점의 기본 제공 기능 중 하나입니다.
리듀서에 발생한 액션을 리듀서에 전달해 준다는 것을 이해할 수 있습니다.
이렇게 전달하면 액션을 처리할 로직이 있으면 스토어가 리듀서 함수를 실행하게 됩니다.
플롯과 관련하여 새로운 상태를 만드는 것입니다.
dispatch(action)4. 감속기
감속기는 state그리고 디스패치에 의해 안내되는 조치 state 값을 참조
새로운 state 값을 생성하고 반환하는 것은 리듀서의 역할입니다.
감속기는 따라서 state 값과 동작 값을 인수로 받습니다.
function reducer(state, action) {
// 상태 업데이트 로직
return alteredState;
}5. 구독하기
구독은 또한 상점의 기본 제공 기능 중 하나입니다.
가게에서 state디스패치 액션에 의해 값이 변경되면,
이 기능은 변경된 값을 업데이트합니다.subscribe 함수는 함수 형태의 값을 매개변수로 받고,
특정 함수를 전달하면 액션이 트리거될 때 전달된 함수가 다시 호출됩니다.