스케줄링 함수는 무엇입니까?

공부아니면useReducer?아마 너는 이미 dispatch 함수의 흑마법에 의해 망쳤을 것이다🧙‍♂️! 좋아, 다행히도 네가 이 게시물을 찾았어.나는 네가 엔진 뚜껑 아래에서 발생한 일을 이해하고 그 배후의 수수께끼를 없애는 것을 도울 것이다dispatch.

무엇이 스케줄링을 이렇게 어렵게 합니까?

Redux나 Reducer hook을 배우는 데는 몇 가지 이유가 있을 수 있습니다.
우선, 두 흐름은 모두'함수식 프로그래밍'이라고 불리는 프로그래밍 모델에 의존한다.이런 방식으로 생각하면 응용 프로그램의 데이터를 어떻게 관리하는지의 심지 모델을 전환해야 한다.함수식 프로그래밍에 대한 더 많은 정보는 본고의 앞부분-Functional Programming in JavaScript: How and Why을 보십시오.이러한 모델을 어렵게 하는 기본 사상은 데이터가 한 함수에서 다른 함수로 흐르고 상태 업데이트와 구성 요소가 다시 렌더링되기 전에 모양을 약간 바꾸는 것이다.
둘째, 둘 다 일부 논리를 서로 다른 함수에 추상화한다.잘 생각해봐.만약 Redux를 사용하고 있다면, 동작 생성자 함수를 호출하고, 그리고...감속기라고 불리며 state과action object를 전입한다.예를 들면, 무슨 꿍꿍이속이야?!?😡 감속기 갈고리 흐름의 추상층은 한 층 줄어들었지만, 여전히 일부 추상층은 혼란을 증가시켰다.

재구성 스케줄링

나는 스케줄링 함수가 어떻게 구축되었는지 연구하는 것이 확실히 감속기 뒤의 수수께끼를 없애는 데 도움이 된다고 생각한다.따라서 보기에서 추상적으로 나온 논리를 보기 위해 간단한 스케줄링 실현을 구축합시다.우리는 함수 정의부터 시작한다.

function dispatch() {

}

구애지금까지 저희가 잘했어요.😁. 다음 단계에서 우리는 함수의 매개 변수로 action 를 추가할 것이다.

function dispatch(action) {

}

따라서 이것은 분파 함수를 호출할 때 동작 대상이 매개 변수로 전달된다는 것을 알고 있다.useReducer 또는 useDispatch 을 사용하고 있다면 이미 알고 있습니다.UI에서 이벤트가 발생하면 스케줄링 함수dispatch({ type: 'ACTION_TYPE' })를 호출할 수 있습니다.만약 Redux와 connect 함수를 사용한다면, 이 부분도 보기에서 추상화될 것입니다.계속합시다.
지금 우리는 약간의 검사를 해야 한다.우리는 전송된 동작 대상이 하나의 대상이고 type 속성을 가지고 있는지 확인해야 한다.만약 그 중 어느 것도 정확하지 않다면, 우리는 잘못을 하나 던질 것이다.reducer 함수를 작성할 때, 이 두 함수가 모두 사실이라고 가정합니다.

function dispatch(action) {
  // check that the action argument is an object
  if (typeof action !== 'object' || obj === null) {
    throw new Error('actions must be plain object.');
  }

  // check that the action object has a 'type' property
  if (typeof action.type === 'undefined') {
    throw new Error('Actions may not have an undefined "type" property.'
  }
}

좋다현재, 우리는 모든 스케줄링된 작업이 하나의 대상이 될 뿐만 아니라,'유형'속성을 가지고 있다는 것을 알고 있기 때문에, 안심하고 약간기를 구축할 수 있다.
지금 설레는 부분이에요!다음에 우리가 해야 할 일은 감속기를 호출하는 것이다.이것은 막후에서 발생한 일에 대한 우리의 견해 외에 숨겨진 추상적인 부분이다.우리가 이 글을 쓰기 전에, 우리는 몇 가지를 포괄해야 한다.
스케줄링 기능은 응용 프로그램의 현재 상태와 같은 범위 내에 있습니다.이것은 디스패치 함수에서 currentState라는 대상에 접근할 수 있음을 의미합니다. 이 대상은 저희 프로그램의 현재 상태입니다.
같은 범위 내에서 우리가 작성하여 createStore 또는 useReducer 로 전달하는 Reducer 함수입니다.따라서 스케줄링 함수도 접근할 수 있습니다 reducer. 우리가 전송한reducer 함수 (우리가 어떻게 호출하든지).이것은 스케줄링 함수가reducer 함수를 호출할 수 있다는 것을 의미한다.
지금까지 우리가 배운 모든 것을 생각하고 이 새로운 지식들을 우리가 알고 있는 감속기에 관한 지식과 결합시키자.dispatch 및currentState에 액세스할 수 있습니다.reducer를 호출할 때, 동작 대상을 매개 변수로 수신합니다.reducer 함수를 호출할 때 두 개의 매개 변수 - dispatch (현재 상태 표시) 와 state 를 전달합니다.내가 무슨 말을 해야 할지 알겠니?action 내부에서, 우리는 현재 dispatch, 전입reducer, currentState 대상을 호출할 것이다.

function dispatch(action) {
  // check that the action argument is an object
  if (typeof action !== 'object' || obj === null) {
    throw new Error('actions must be plain object.');
  }

  // check that the action object has a 'type' property
  if (typeof action.type === 'undefined') {
    throw new Error('Actions may not have an undefined "type" property.');
  }

  // call the reducer and pass in currentState and action
  reducer(currentState, action);
}

자세히 봐...하나의 동작이 스케줄링되었을 때, 또는 우리가 action 동작 대상을 호출하고 전달할 때, dispatch 함수는 우리의reducer를 호출하여 현재 상태와 동작 대상을 전달합니다!🤯 이 모든 것이 의미가 생기기 시작했다!
네, 마지막 부분도 있어요. - 업데이트 상태.네가 어떻게 감축 함수를 썼는지 생각해 봐라.그것은 무엇으로 돌아갑니까?그것은 새로운 상태 대상을 되돌려줍니까?변경되지 않는 원칙에 따라 이전 상태의 복사본을 되돌려주고 스케줄링된 작업에 따라 새 데이터를 업데이트합니다.따라서 dispatch 함수가 이 동작을 실행할 때 - dispatch - 이 함수 호출은 새로운 상태 대상을 되돌려줍니다.이 스케줄링 함수는reducer를 호출하여 되돌아오는 새로운state 대상으로currentState를 업데이트해야 합니다.

function dispatch(action) {
  // check that the action argument is an object
  if (typeof action !== 'object' || obj === null) {
    throw new Error('actions must be plain object.');
  }

  // check that the action object has a 'type' property
  if (typeof action.type === 'undefined') {
    throw new Error('Actions may not have an undefined "type" property.');
  }

  // call the reducer and pass in currentState and action
  // capture the new state object in currentState, thus updating the state
  currentState = reducer(currentState, action);
}

봐라!우리는 reducer(currentState, action); 함수의 간단한 실현을 세웠다.물론 실제 실현에는 더 많은 것이 있다.Redux에서 dispatch 애플리케이션 상태가 업데이트되었음을 알려야 합니다.이것은 탐지기와 구독을 통해 이루어진 것이다.dispatch 갈고리에서 React 인식 상태가 업데이트되고 구성 요소가 다시 렌더링됩니다.그리고 업데이트된 상태는 호출 useReducer 갈고리의 구성 요소로 되돌아갑니다.
얼마나 많은 추가 실현이 있든지 간에, 여기에서 useReducer 함수를 구축하면 우리의 응용 프로그램에서 dispatch 호출할 때 엔진 뚜껑 아래에서 발생하는 일을 이해하는 데 도움을 줄 것이다.

Redux 및 액션 제작자

Redux와 dispatch 를 사용한다면 추상적인 탐색이 필요합니다.connect 함수를 사용하면 동작 생성기를 connect 함수의 대상에 전달할 수 있습니다.동작 생성자는 도구를 통해 구성 요소에 전달됩니다.구성 요소에서 동작 생성자를 호출할 때dispatch를 호출합니다.이것은 부가적인 추상층이다.엔진 뚜껑 아래에서 무엇을 했는지 봅시다.

// in connect
dispatch(actionCreator());

따라서 connect 동작 창설자를 둘러싸고 포장connect 함수를 호출한다.actioncreator를 호출할 때, 동작이 되돌아옵니다. 맞습니까?따라서 위의 평가는 다음과 같습니다.

dispatch({ type: 'ACTION_TYPE' });

우리는 지금 그것이 감속기라고 불릴 것이라는 것을 안다.오!🚀

결론

감속기의 흑마법을 없애는 데 도움이 됐으면 좋겠어요!논리적 흐름을 곰곰이 생각하면, 이것은 모두 호출 함수와 데이터를 전달하는 함수이다.