현대 국가의 관리와 통어.js

응용 프로그램에서 처리 상태는 데이터를 처리하는 것과 같다.이 글은 React 응용 프로그램에서 Overmind.js 처리 상태를 사용하는 매우 재미있는 방법에 관한 것이다

왜 머리가 맑아요?
상태 관리에 사용되는 도구가 많은데 예를 들면 Context-API,Redux,MobX 또는MST이다.그럼 우리 왜 하나 더 있어야 되지?
최신 고객 프로젝트에서 context based state와 Apollo Client를 사용했습니다.나는 React 갈고리를 매우 좋아한다. 이것은 상하문 API와 함께 응용 프로그램의 상태를 처리하는 매우 좋은 방법이다.내가 보기에 나는 Redux처럼 더 큰 상태 관리 솔루션을 필요로 하지 않는다.처음에는 좋았다. 나는 이런 방법에 만족했지만, 두 달 후에는 응용 프로그램이 더욱 커지고 복잡성도 증가했다.나는 더 이상 즐겁지 않다. 나는 다른 해결 방안을 바꿀 때가 됐다고 결정했다.
내가 사용하고 좋아했던 날Redux들 동안 나는 매우 편안했지만, 그것은 항상 작은 물건인 코드가 너무 많은 냄새가 났다.다른 한편, 나는 진정으로 사용한 적이 없다MobX. 그러나 그것의 장점만 들어 본 적이 있다.몇 가지 연구를 한 후에 나는 Overmind라는 새 도서관을 발견했는데, 그것은 매우 재미있었다.

가장 좋은 것을 한데 결합시키다
Overmind는 Christian Alfoni에 의해 만들어졌으며 가능한 한 최고의 개발자 체험을 제공하고 강력한 TypeScript 지원을 제공하는 것이 목표이다.프레임워크 내부는 개발자에게 숨겨져 있고 API는 매우 간단하고 직접적이다.

강력한 타자 스크립트 지원

매우 간단한 API

좋은 문서 및 학습 용이성

위대한 개발 도구

나는 네가 오버마인드에서 얻을 수 있는 가장 좋은 것 중 하나가 바로 네가 거의 모든 종류의 코드를 무료로 얻을 수 있다는 것이라고 생각한다.

상태 정의
당신의 상태를 간단한 대상으로 정의합니다.Typescript에서도 다음과 같이 상태를 간단하게 정의할 수 있습니다.

const state = {
  // title: string
  title: "", 
  // count: number
  count: 0,  
  // foo: Foo | null
  foo: null as Foo | null,
}

HINT: Don't use undefined or ? in your state because it is just considered an anti pattern. Any undefined value on a state will not show up in the devtools, it will not be passed to server or saved in local storage.

state를 어디서 사용하든지 간에, TypeScript 지원과 코드가 완성되어 있습니다.아주 간단하죠?

파생태
파생 상태는 다른 상태를 바탕으로 계산된 값이다.개요에서 상태 옆에 파생 상태를 직접 정의합니다.
여기서 상태 변수를 계산하는 더블 카운트를 정의합니다.주의해야 할 것은 이 함수는 기본적으로 기억되고 계수가 변할 때만 실행된다는 것이다.

const state = {
  count: 0,
  // memoized function that only executed when count change
  doubleCount: (state) => state.count * 2
}

Redux에서 선택기를 작성하고 Reselect 같은 라이브러리로 계산을 기억해야 합니다.그러나 Overmind에 포함된 것은 아니다.아주 간단하죠?

상태가 돌변하다.
모든 상태의 돌연변이는 동작을 통해 이루어진다.작업을 수행하면 사용자의 상태에 액세스하고 속성을 직접 변경할 수 있습니다.

function incCount(state) {
  state.count = state.count + 1
  // hint: you get fully typed state and actions here
  state.count = "three" // TS Error: Should be number
}
function resetCount(state) {
  state.count = 0
}
function setCount(state, value) {
  state.count = value
}

HINT: You can't mutate state outside the actions, this means you can't accidentally try to change them in your views.

Redux에서와 같은 전파 광기는 불변성을 가져오지 않는다.니가 바꾸고 싶은 것만 바꾸면아주 간단하죠?

부작용
특수효과는 응용 프로그램을 제3자 API와 완전히 분리시킬 수 있습니다.너는 이곳에서 그들에 대한 더 많은 정보를 읽을 수 있다. overmind effects

From the docs: Developing applications is not only about managing state, but also managing side effects. A typical side effect would be an HTTP request or talking to localStorage. In Overmind we just call these effects.

효과는 Overmind의 onInitialize 기능에서 초기화되어야 합니다.그곳에서 현재 상태를 가져오거나 실행하는 Getter와 같은 그들이 필요로 하는 모든 것을 제공할 수 있다.

export const onInitialize = ({ state, effects, actions }) => {
  effects.myCoolEffect.initialize({
    getSomeState: state.partOfState,
    onMoviesLoadSuccess: actions.setMovies
  })
}

구성 요소의 액세스 상태 및 작업
구성 요소의 상태를 가져오려면 connect Overmind에 설정해야 합니다.이것은 상태와 조작을 제공하는useOvermind 갈고리를 통해 이루어진 것이다.네가 해야 할 일은 훅의 결과를 해체하는 것이다. 너는 네가 필요로 하는 모든 것을 가질 수 있다.

function Counter() => {
  // hint: you get fully typed state and actions here
  const {
    state: { count },
    actions: { incCount }
  } = useOvermind()

  return (
    <div>
      Count: {count}
      <button onClick={incCount}>INC</button>
    </div>
  )
}

이게 다야?네, 상태와 동작을 구성 요소에 넣는 것이 얼마나 쉬운지.그러나 등등: 전 세계의 다른 부분에 변화가 발생할 때, 예를 들어 제목, 우리는 어떻게 부품의 재입찰을 방지합니까?우리의 구성 요소는count에만 관심이 있고, 이 값이 바뀔 때만 다시 불러오고 싶습니다.
맞혀보세요: Overmind는 구성 요소가 사용하고 있는 상태의 어떤 부분을 정확하게 알고 이 부분의 상태가 변할 때만 구성 요소를 업데이트합니다.아주 간단하죠?

돌연변이 추적
Overmind는 불변성 대신 돌연변이 추적을 사용합니다. 이 개념에 대한 내용을 더 많이 읽을 수 있습니다. immutability vs. mutation tracking

Christian Alfoni: How you detect the changes and update the UI should just work and be performant! With mutation tracking you put your faith in the system. It relieves you of the mental load of figuring out how components update, it just works and optimally so.

강력한 개발 도구
Overmind에는 매우 강력한 개발 도구가 포함되어 있습니다.VSCode extension 또는 독립 실행형 버전을 사용할 수 있습니다.

npx overmind-devtools

모든 상태와 파생 상태를 볼 수 있으며, 도구에서 직접 변경할 수도 있다.실행 중인 모든 작업과 부하, 그리고 상태가 바뀐 부분도 볼 수 있습니다.보내기 동작?물론 너도 이렇게 할 수 있다.
응용 프로그램의 보기는 단지 세부 사항을 실현하는 것일 뿐이다.보기 없이 전체 응용 프로그램 논리를 작성하고 실행할 수 있습니다. devtools만 사용하면 됩니다.신기하고 간단하죠?

함수식 프로그래밍 스타일
나는 함수식 프로그래밍 범례를 매우 좋아한다. 이런 범례는 React에 도입된 것이고 연결이 발표된 후에 React 세계의 기본 범례가 되었다.Overmind는 이 점에 완전히 부합된다.너는 함수만 쓰고 클래스는 필요 없다.
내가 MobX에서 이 점을 보았을 때 이것은 나에게 매우 큰 단점이었다. 왜냐하면 모든 예는 클래스를 사용하기 때문이다. 가능하다면 나는 클래스를 더 이상 사용하고 싶지 않다.
순함수는요?그래, 물론 통어행동은 일반적인 감량기처럼 순수하지 않다.사실 이것은 나에게 있어서 진정한 결점이 아니다. 왜냐하면 너는 너의 행동을 쉽게 테스트할 수 있기 때문이다.

문서 및 학습 곡선
Overmind에는 매우 좋은 문서가 있습니다.나는 그것을 읽고 내 프로그램에서 시도하기 시작했다. 3시간 후에 나는 내 프로그램 전체를 재구성했다.
프레임워크 내부는 개발자에게 숨겨져 있고api는 매우 간단하고 직접적이다.다른 숨겨진 것은 배울 수 없다. 예를 들어reselect,redux-sagas,redux-thunk 등이다.
멋있는 방주: 이것은 매우 간단합니다. 저는 변경할 자신이 있습니다. 왜냐하면 제가 사용했기 때문입니다react-testing-library.이 테스트들은 구성 요소의 기능을 테스트하는 것이지 세부 사항을 실현하지 못했다.테스트 초기화 과정에서 나는 아주 적은 조정만 할 수 있다.
몇 시간 후에 너는 이미 매우 편안함을 느낄 것이다.지난 몇 주 동안 나는 머리를 Redux에게 감는 데 몇 주일이 걸렸다.나도 MobX(Overmind를 배우는 동시에)를 시도해 봤다. 만약 이것이 당신에게 새로운 것이라면 문서를 읽고 모든 관찰자와 관찰할 수 있는 것을 이해하는 것은 훨씬 어려울 것이다.

실행 예
여기서 Codesandbox의 작업 예를 볼 수 있습니다.
Codesandbox Example TypeScript

요약
나는 Overmind을 찾아서 매우 기뻤다. 그것은 사용하기에 정말 재미있고, 또한 나의 응용 프로그램을 완전히 간소화시켰다.나는 이 문장이 네가 한번 시도하는 것을 도울 수 있기를 바란다.

유용한 링크

Codesandbox Example TypeScript

Overmind docs with great introduction

Videos of the creator Christian Alfoni himself

immutability vs. mutation tracking

표지 이미지는 Theodor Moise에서 열림Pixabay