Redux 101

레드ux란 무엇인가?

Redux는 클라이언트, 서버 및 네이티브 환경에 걸쳐 일관되게 실행되고 테스트가 용이한 JavaScript 응용 프로그램을 작성할 수 있도록 설계된 예측 가능한 상태 관리 라이브러리입니다.

왜 Redux를 고려해야 합니까?

Redux 공식 파일에 따르면:

"Redux helps you manage "global" state - state that is needed across many parts of your application.

The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected."

Redux가 해결하려는 문제는 무엇입니까?

Redux가 해결하고자 하는 문제는 예측할 수 있는 상태 갱신이다. 상태가 어디에 있는지, 왜 바뀌었는지 알고'단일한 진실의 출처'를 가지는 것이 장점일 수 있기 때문이다.
Redux는 프로그램을 쉽게 디버깅할 수 있습니다. 어떻게 디버깅합니까?
UI 레이어를 데이터와 분리하여 언제든지 애플리케이션 작동을 파악할 수 있습니다.

Redux의 주요 원칙은 무엇입니까?

Redux 설계 이면의 의도는 다음과 같은 세 가지 핵심 개념으로 요약할 수 있습니다.

1. 진실의 단일한 출처
애플리케이션(데이터, 사용자 인터페이스) 상태에서 변경된 모든 내용이 단일 객체에 포함됩니다(*상태 트리/스토리지*)
상점의 초기 상태는 사용자가 결정하지만, 이것은 보통 하나의 대상입니다. 예를 들어 하나의 모델입니다. setter가 초기 설정을 할 필요가 없습니다.

스토어:

응용 프로그램 전체 상태 트리를 저장하는 객체에는 몇 가지 방법이 있습니다.

getState()

dispatch(action)

subscribe(listener)

replaceReducer(nextReducer)

잠시 후에 우리는 저장과 그 방법에 대해 진일보한 토론을 할 것이다.

어떻게 Redux 응용 상점을 만듭니까?

다음과 같이 root reducer 함수를 createStore에 전달합니다.

const userReducer = function(state = [], action) {
  if (action.type === 'ADD_USER') {
    var newState = state.concat([action.user]);
    return newState;
  }
  return state;
}
const store = createStore(users, ['Use Redux'])
store.dispatch({
  type: 'ADD_USER',
  user: {name: 'Rawan', language: 'EN'}
})

createStore(reducer, [preloadedState], [enhancer])우리는 지금 '프리로드 상태' 만 토론하고 있으며, 잠시 후에 감속기를 설명할 것이다.
[사전 로드 상태]: 응용 프로그램의 초기 상태입니다.

2. 읽기 전용 상태
상태 트리는 읽기 전용이며, 응용 프로그램에서 Redux 저장소로 데이터를 전송하는 상태를 변경하는 유일한 방법은 다음과 같이 작업을 전송하는 것입니다.

const action = {
  type: 'ADD_USER',
  user: {name: 'Rawan', language: 'EN'}
};

store.dispatch(action);

파견 행동은 무엇을 의미합니까?

스케줄링을 응용 프로그램의 트리거 이벤트로 볼 수 있습니다.무슨 일이 일어났는지 우리는 상점에 알리고 싶다.

행동:

변경 내용을 설명하는 일반 JS 객체로, 수행할 작업의 유형을 나타내는 유형 필드가 있습니다.
유형 필드는 "domain/eventName"형식의 설명 문자열이어야 합니다. 예를 들어 "users/userLogin"입니다.
동작 대상에는 무슨 일이 일어났는지 추가 정보를 포함하는 다른 필드가 있을 수 있습니다.우리는 '유효 하중' 이라고 부른다.

const userLoginAction = {
  type: 'users/USER_LOGIN',
   payload: {
    username: "Adam",
    password: "pass1234"
  }
}

보시다시피, 우리는 동작을 유형과 유효한 부하를 가진 대상으로 성명할 것입니다.
3. 순기능(감속기)으로 변경
스케줄링 동작이 상태 트리를 어떻게 변환하는지 지정하기 위해서, Reducer라는 순수 함수를 작성했습니다.

일반 기능:

같은 입력을 주면 항상 같은 출력(상태)을 되돌려주는 함수로 그 되돌려주는 값은 매개 변수의 값에 달려 있다.
예를 들어 1과 4를 구화 함수에 전달하면 항상 5를 얻는다.
또한 순수 기능에는 다음과 같은 부작용이 없어야 한다.

입력 수정, 네트워크 호출, 파일 시스템 변경(fs), DOM 조회, 비동기 타이머 설정, 함수 외부의 일부 상태 수정, 함수의 매개 변수를 수정하여 무작위 수 또는 유일한 무작위 ID(예를 들어 Math.random() 또는 Date)를 생성합니다.지금...등.

감속기:

reducer는 현재 상태와 조작 대상을 매개 변수로 하고 새로운 상태를 되돌려서 상태를 수정할 수 있습니다.
redux 문서에 설명된 대로

You can think of a reducer as an event listener that handles events based on the received action (event) type.

감속기는 세 가지 중요한 규칙이 있다.

상태와 조작 매개 변수만 바탕으로 새로운 상태 값을 계산해야 한다.

현재 상태를 수정하는 것을 허락하지 않습니다.

기존 상태를 복제하고 복제된 값을 변경해서만 변경할 수 있습니다.
비동기식 논리를 실행하거나 임의의 값을 계산하거나 다른 부작용을 일으킬 수 없습니다.

보시다시피 Reducer의 규칙은 순수 함수의 규칙과 일치하지만, 우리는 왜 이런 규칙을 따라야 합니까?

코드는 함수의 출력이 입력 매개 변수로만 계산될 때 코드의 작업 원리를 이해하고 테스트하기 쉽다.

함수가 매개 변수 (현재 상태, 동작) 를 포함하여 다른 값을 수정하면 프로그램의 의외의 작업 방식을 바꿀 수 있습니다.이것은 흔히 볼 수 있는 오류 원본일 수 있습니다. 예를 들어 "내가 상태를 업데이트했지만, 현재 나의 UI는 업데이트해야 할 때 업데이트되지 않았습니다."

Redux DevTools의 일부 기능은 복원 프로그램이 이러한 규칙을 제대로 따르는지 여부에 따라 달라집니다.

어쨌든

Redux는 모든 응용 프로그램의 상태를'store'라는 단일한 실제 원본에 저장합니다. 상태를 바꾸기 위해 구성 요소는 저장 변경 사항을'스케줄링'할 수 있습니다. 그리고 상태 변경을 알아야 하는 구성 요소는'구독'저장을 통해 상태를 변경할 수 있습니다. 그림과 같습니다.

마지막으로 redux를 사용한 간략한 요약은 다음과 같습니다.

본고는 여기까지입니다. 이것은 Redux의 주요 개념에 대한 소개일 뿐입니다. 저는 당신이 몇 가지를 배울 수 있기를 바랍니다.
즐거운 코딩!
리소스:
https://redux.js.org/