Redux 는 Flux 와 비교할 때 상태 관리가 훨씬 쉬워지는 하나의 저장소를 사용하기 때문에 Redux 를 사용하는 것을 선호합니다 . 또한 Redux DevTools 는 유용한 데이터를 사용하여 상태에서 수행중인 작업을 볼 수 있고 React 개발 도구와 실제로 인라인을 제공하는 유용한 도구입니다.

또한 Redux 는 Angular 와 같은 널리 사용되는 다른 프레임 워크와 함께 사용하여 유연성을 향상 시켰 습니다 . 어쨌든, Redux가 어떻게 프레임 워크로 자신을 소개하는지 봅시다.

Redux에는 Redux를 매우 잘 도입 할 수있는 세 가지 원칙 이 있으며 Redux와 Flux의 주요 차이점이기도합니다.

진실의 단일 소스

전체 애플리케이션의 상태는 단일 저장소 내의 오브젝트 트리에 저장됩니다.

이를 통해 별도의 코딩 작업없이 서버의 상태를 클라이언트에 직렬화하고 수화 할 수 있으므로 범용 앱을 쉽게 만들 수 있습니다. 단일 상태 트리를 사용하면 응용 프로그램을보다 쉽게 ​​디버깅하거나 검사 할 수 있습니다. 또한 개발주기를 단축하기 위해 개발시 앱의 상태를 유지할 수 있습니다. 예를 들어 실행 취소 / 다시 실행과 같이 전통적으로 구현하기 어려운 일부 기능은 모든 상태가 단일 트리에 저장된 경우 갑자기 구현하기가 쉽지 않을 수 있습니다.

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

상태는 읽기 전용입니다

상태를 변경하는 유일한 방법은 무슨 일이 있었는지 설명하는 개체 인 작업을 내보내는 것입니다.

이렇게하면 뷰나 네트워크 콜백이 상태에 직접 쓰지 않습니다. 대신, 그들은 국가를 변화시키려는 의도를 표현한다. 모든 변경 사항이 중앙 집중식으로 이루어지고 엄격한 순서대로 하나씩 발생하므로주의해야 할 미묘한 경쟁 조건이 없습니다. 작업은 단순한 개체이므로 디버깅, 테스트 목적으로 기록, 직렬화, 저장 및 나중에 재생할 수 있습니다.

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

순수한 기능으로 변경

조치에 의해 상태 트리가 변환되는 방법을 지정하려면 순수한 리듀서를 작성하십시오.

감속기는 단지 이전 상태와 조치를 취하고 다음 상태를 리턴하는 순수한 함수입니다. 이전 상태를 변경하지 않고 새 상태 객체를 반환해야합니다. 단일 리듀서로 시작하여 앱이 성장함에 따라 상태 트리의 특정 부분을 관리하는 더 작은 리듀서로 분리 할 수 ​​있습니다. 감속기는 단지 기능이기 때문에 호출 순서를 제어하거나 추가 데이터를 전달하거나 페이지 매김과 같은 일반적인 작업에 재사용 가능한 감속기를 만들 수 있습니다.

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

자세한 내용은 여기를 방문 하십시오

---

답변