react 갈고리와 상하문이 있는 전역 상태 관리

From prop drilling to centralized global state management with react

이 모든 것은react,vue,angular 등 놀라운 프레임워크에서 시작되었다. 이 프레임워크들은 문서 대상 모델(DOM)에서 추상적인 응용 프로그램 데이터에 대한 절묘한 생각을 가지고 있다.구체적으로 말하자면 당신들의 reconciliation algorithm과 빠른 fiber architecture으로 반응하는 데 중점을 두는 것은 이 층(추상과 DOM)의 업데이트 속도입니다.이를 통해 "진정한"HTML 구현이 아니라 구성 요소에 집중할 수 있습니다. 그러나 그 중에서도 새로운 도전을 가져와 이미지에 담았습니다.

이것은 고전적인 반모드로 반응 구성 요소 트리를 통해 그것들 사이에서 속성을 전달하는 과정이다.만약 당신이 대상을 향한 스타일을 사용한다면, 더욱 높은 단계의 구성 요소나 장식기는 우리에게 더욱 큰 유연성과 다른 구조 가능성을 제공할 것입니다.우리는 현재 우리가 공유하고자 하는 기능을 추출하고 그 구성 요소를 사용해야 한다고 장식할 수 있다.

구성 요소가 서로 상호작용하지 않는 작은 응용 프로그램을 처리할 때, 이 모든 것은 매우 좋다. 그러나 우리가 거대한 구성 요소 생태계 사이에서 복잡한 통신을 할 때, 이런 방법은 복잡하고 오류가 발생하기 쉽다.이러한 현실에서 출발하여 우리의 단방향 데이터 흐름은 다음과 같은 단계에 들어섰다.

그 전에는 새로운 내용이 없었지만, 만약 우리가 이 개념을 채택하고react 상하문과 연결을 사용하여 그것을 응용한다면!?이것이 바로 네가 이곳에 온 이유야!

주요 개념

현재의 주요 하이라이트는 우리의 위대한 새로운 친구react hooks와 당신의 실용적인 방법입니다.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

그리고 중심사상은 context API 및 useContext 및 useReducer 연결을 사용하여 우리 상점이 우리의 구성 요소에 사용할 수 있도록 하는 것이다.

import React, { createContext, useContext, useReducer } from 'react';

export const StateContext = createContext();

export const StoreProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider
    value={useReducer(reducer, initialState)}
    children={children}
  />
);

export const useStore = () => useContext(StateContext);

이 파일source code here에서 수신하는 StoreProvider(응용 프로그램의 컨텍스트/스토리지 제공)를 내보냅니다.

서명(state,action) = >newState의reducer 함수 있음;

응용 프로그램의 초기 상태;

과 신청 내용(어린이);

그리고 저장/상하문에서 데이터를 가져오는 usestore 갈고리입니다.
비록 지금부터 이러한 용어는 다르지만, 나는 우리의 상하문을store라고 부른다. 개념이 같기 때문에 우리는 그것을 우리가 알고 있는 Redux 구조 표준과 쉽게 연결할 수 있다.
아름다움은 이런 간단함에 있다.

상태 컨텍스트.공급자 수신 값 대상(현재 상태);

useReducer는 함수를 받았습니다. (state,action) = >newState와 initialState, 그리고 저희 프로그램에서 보내는 모든 스케줄링이 여기에 전달되고 저희 프로그램의 현재 상태를 업데이트합니다.

useContext는 우리의 상점을 가져와 응용 프로그램에서 사용할 수 있도록 합니다!

나머지는 코드 구성과 변경일 뿐입니다. 걱정하지 마십시오.)

디테일에 들어가다

개념적 증명으로 나는 이미 이 기본적인 업무 목록 응용 프로그램check here the source code과 here the live implementation을 완성했다. 이것은 기본 인터페이스로 구성 요소와 현재 상태 트리를 포함하기 때문에 우리는 시간의 추이에 따라 상태의 수정을 볼 수 있다.
프로젝트 구조는 다음과 같습니다.

구조가 매우 간단합니다. (보통 Redux 응용 프로그램에서 하는 것처럼) 저는 Reducer에서 initialState를 삭제했습니다. 왜냐하면 Reducer는 상태 수정에 관한 것이지 정의된 것이 아니기 때문입니다. 그리고store 폴더에는 이미 논의된react-context/hooks가 포함되어 있습니다.
reducer 파일은 완전히 다른 디자인을 가지고 있습니다.

import * as todo from './todo';
import * as types from 'actions/types';

const createReducer = handlers => (state, action) => {
  if (!handlers.hasOwnProperty(action.type)) {
    return state;
  }

  return handlers[action.type](state, action);
};

export default createReducer({
  [types.ADD_TODO]: todo.add,
  [types.REMOVE_TODO]: todo.remove,
  [types.UPDATE_TODO]: todo.update,
  [types.FILTER_TODO]: todo.filter,
  [types.SHOW_STATE]: todo.showState,
});

이곳의 중점은 매핑 대상이 있는reducer 함수에서 흔히 볼 수 있는 커다란 switch 문장을 피하는 것이다. 따라서 기본적으로 모든 새로운reducer에 대해 우리는 매핑 대상에 새로운 입구를 추가하기만 하면 된다.
그러나 이것은 모두 실현된 문제입니다. 함수는 (state, action) = > newState 인터페이스가 있어야 합니다. 마치 우리가 Redux에 익숙해진 것처럼.
마지막으로, 가장 중요하지 않은 것은 우리의 구성 요소가 상점에 가입했다는 것이다.

import React from 'react';

import { useStore } from 'store';
import { addTodo, filterTodo } from 'actions';

import uuid from 'uuid/v1';

import Button from '@material-ui/core/Button';

export default props => {
  const [{ filter }, dispatch] = useStore();

  const onClick = () => {
    dispatch(addTodo({ id: uuid(), name: filter, done: false }));
    dispatch(filterTodo(''));
  };

  return (
    <Button
      {...props}
      variant='contained'
      onClick={onClick}
      disabled={!filter}
      children='Add'
    />
  );
};

다음은 무엇입니까

다음 단계는 중간부품과 유형 검사와 관련이 있는데, 우리는 여기서 어떻게 일합니까?기술적으로 말하자면 중간부품은 스케줄링 작업이 Reducer에 도착하기 전에 호출된 함수이기 때문에 위의createReducer 함수는 좋은 곳입니다. 그러면 유형 검사는!?위에 타자 원고가 있어요!안녕히 가세요.
건배!
참고 문헌:
https://github.com/acdlite/react-fiber-architecture
https://reactjs.org/docs/reconciliation.html
https://reactjs.org/docs/hooks-intro.html
https://github.com/vanderleisilva/react-context