Redux 결합 감속기

나는 redux의 개념을 이해하고 그 부분이 어떻게 작동하는지 이해하려고 노력하고 있습니다. 겸용 감속기를 배운 경험을 바로 여기에서 공유하고 싶습니다.
Redux의 문서에 따라 결합 감속기에 대한 세 가지 규칙이 있습니다.
여기 링크https://redux.js.org/api/combinereducers

인식되지 않는 작업의 경우 첫 번째 인수로 지정된 상태를 반환해야 합니다. 이 점을 자세히 설명하기 위해 먼저 reducer 폴더 아래에 todos 파일을 만듭니다.
콘텐츠는 아래와 같아야 합니다. 이것은 선택된 action.type에 따라 동작을 전환하고, 그렇지 않으면 기본 상태를 반환해야 합니다. 오류 오류: 초기화 중에 정의되지 않은 감소기 "todos"/"counter"가 표시됩니다.

export default function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

다음으로 counter.js라는 또 다른 파일을 만듭니다. 내용은 아래와 같습니다. 여기서도 action.type을 기반으로 카운터를 늘리고 줄입니다. 여기서 초기 상태는 0입니다.:

export default function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

이제 내용이 아래와 같은 reducer 폴더 안에 combineReducer.js라는 또 다른 파일을 만들 것입니다. 이 파일은 먼저 redux 라이브러리에서 combineReducers를 가져옵니다. combineReducers는 값이 { todos: todos,
counter: counter
}인 객체를 가져옵니다. ES6 구문에서 아래와 같이 간단하게 표현할 수 있습니다.

import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'

export default combineReducers({
  todos,
  counter
})

이제 가장 흥미로운 부분인 index.js 또는 App.js에서 저장소를 만들고 디스패치 작업과 console.logging을 수행합니다. 그 내용은 아래와 같습니다.

import { createStore } from 'redux'
import combineReducers from './reducers/index'

const store = createStore(combineReducers)
console.log(store.getState());

//1.First argument is only returned
store.dispatch({
  type: 'ADD_TODO',
  text: 'This is the 1st argument from todos'
}, { type: 'DECREMENT'})

console.log(store.getState());

store.dispatch({
  type: 'INCREMENT'
})

console.log(store.getState());

store.dispatch({
  type: 'DECREMENT'
})

console.log(store.getState());

store.dispatch({
  type: 'DECREMENT'
})

console.log(store.getState());

코드의 첫 번째 줄에서는 redux 라이브러리에서 createStore를 가져왔습니다.
주석 섹션-1 아래 코드의 경우 store.dispatch에 두 개의 매개 변수를 제공하지만 다음과 같이 반환됩니다.

따라서 규칙은 첫 번째 인수(오직)가 확인될 때 주어진 상태를 반환해야 합니다.

두 번째 규칙은 정의되지 않은 상태를 반환해서는 안 된다는 것입니다. 이를 확인하기 위해 정의되지 않은 상태를 반환하는 빈 객체를 제공했습니다. 따라서 액션 유형이 있어야 한다고 말할 수 있습니다. 빈 문자열 유형의 객체가 제공되면 출력은 아래와 같이 정의되지 않습니다.


이제 세 번째 규칙은 주어진 상태가 정의되지 않았거나 단순히 빈 문자열 또는 null인 경우 출력은 아래와 같이 이전 상태에서 전달됩니다.





시간 내 주셔서 감사합니다.
행복한 배움 :)