안녕 레덕스!제가 더 좋아하는 불변 반응 상태 관리자가 있어요.

나는 이미react와reactredux를 사용한 지 오래되었다.지난 2년 동안, 나는 5개가 넘는 파일을 통해 스케줄러에서 사용되는 단일 데이터 흐름을 찾고 싶을 때, 그것이 이렇게 복잡해서, 나는 지금 Redux의 Reducer와sync 조작에 싫증을 느꼈고, 이로 인해 비동기적인 조작이 사악해졌다.나는 내react 전역 상태 관리자를 구축하는 것을 고려해 왔다. 마지막으로 나는 라이브러리reactimmut를 구축하여 나의 목표를 실현했다.

상태 데이터 흐름

react의 생태학에서 우리는 단방향 데이터 흐름과 불변 상태 순환을 제창한다.이상적인 상황에서 우리의 상태 흐름은 다음과 같다.

그러나 사용자 체험 프로세서는 데이터를 되돌려주기 때문에 다음과 같은 동그라미입니다.

구성 요소의 도구를 업데이트할 때마다 이벤트를 루트 상위 레벨로 전송하여 상위 레벨의 상태를 변경하여 UI 렌더링을 트리거합니다.이것은 플러그인 구성 요소를 쓸모없는 파이프 도구로 가득 채울 것이다.
이를 더욱 편리하게 하기 위해react Official은 통량 구조를 제시하여 전역 상태 관리자를 구축하도록 지도했다.Redux(react-Redux)는 가장 유행하는 글로벌 상태 관리자가 되었다.상태 데이터 흐름 모드는 다음과 같이 교차 구성 요소 단계로 전환됩니다.

글로벌 상태 관리자는 심층 중첩 구성 요소 네트워크를 더욱 뚜렷하게 합니다.모든 두 구성 요소 사이에는 몇 층의 공간이 있든지 간에redux를 통해 중개인으로 두 단계의 통신을 할 수 있다.

사악한 감속기

리듀서가 천사로 여겨지는 시대는 지났다. 코드가 증가함에 따라 리듀서와 동작 함수는 우리를 골치 아프게 한다.왜 나는 이렇게 많은 비진실 관련 코드를 써야 합니까?우리의 목적은 UI 구축을 더욱 빨리 완성하는 것이지만,redux는 걸림돌처럼 우리의 속도를 늦춘다.내가 디버깅을 할 때, 나는 왜 데이터가 변경되어 오류가 발생했는지 찾아내기 위해 여러 개의 파일을 돌려야 한다.만약 네가 나에게 칼을 준다면, 나는 그것을 Redux에게 건네줄 것이다.
Redux+react 시스템에 무엇이 있는지 살펴보겠습니다.

네, 우리는 단방향 데이터 흐름을 얻었지만, 여기, 여기, 여기에 인코딩해야 합니다...

나는 이 부분들을 한데 결합시켜서 그것들이 조금도 틀림없이 일을 하도록 해야 한다.
너무 많은 부품은 취약함을 초래할 수 있다!
사실상, 나는 확실히 업무 구성 요소의 개발에 관심을 가지고 싶다.

고집불통

나의 상태 변화가 변하지 않는 것을 확보하기 위해, 나는 이미 대상이 확산되는 유저로 성장했다(...).사례를 살펴보겠습니다.

음...왜 이렇게 많이 써야 되는데...이렇게 깊이 중첩된 중복 객체를 작성해야 합니까?

마술사 이머

Immer는 개발자가 대상을 변경할 수 없도록 도와주는 라이브러리이다.놀랍게도 APIproduce 함수는 하나만 제공됩니다.

import produce from 'immer'

일반적인 사용법:

const next = produce(prev, draft => {
  draft.root.parent.child[1].name = 'new name'
})

두 번째 매개 변수에서는 가변 조작처럼 보이지만, 실제로는 초고일 뿐, 출력 next 은 prev 에서 온 새로운 대상이다.
이제부터 나는 대상을 낮추고 이머에게 감사를 표하며 간단하고 또렷하며 마술을 펼칠 것이다.

신세대

React 갈고리는 중첩된 구성 요소 네트워크를 뚫는 새로운 방법입니다.React-redux는 전역 저장소에서 상태를 가져오기 위해 useSelector 갈고리 함수를 제공합니다.useContext는 우리에게 상단 상하문에서 추출할 기회를 주었다.useReducer 패턴은 부분적으로 [state, dispatch] 패턴을 사용하는 템플릿입니다.

2세대 글로벌 상태 관리는 연결을 기반으로 한다.새로운 주 매니저Recoil를 들을 수 있습니다. 페이스북 팀에서 발표한 것입니다.반충에서 상태와 동작은 원자, 선택기로 추상적이다.

체면 반응 면역

나는 주말 동안 라이브러리react-immut를 완성했다. 라이브러리는 전역 상태 관리자로reactredux와 유사한 API를 가지고 있지만 감축기가 없다.한 번 살펴보겠습니다.

import { createStore, Provider, useStore } from 'react-immut'

const store = createStore({
  name: 'tom',
  age: 10,
})

function App() {
  return (
    <Provider store={store}>
      <div class="container">
        <h3>Some Person</h3>
        <Person />
      </div>
    </Provider>
  )
}

function Person() {
  const [state, dispatch] = useStore()
  const { name, age } = state
  const grow = () => dispatch(state => {
    // here `state` is a draft of global state
    state.age ++
  })
  return (
    <div>
      <span>Name: {name}</span>
      <span>Age: {age} <button onClick={grow}>Grow</button></span>
    </div>
  )
}

봐, 이거 쉽지 않아?우리는 감속기를 정의할 필요가 없다. 강력한 dispatch 이 있다. 이것은 immer를 바탕으로 상태를 명확하고 편리하며 편안하게 변경할 수 있다.
이것은reactimmut의 전형적인 용법으로 repo에서 더 많은 정보를 얻을 수 있습니다.만약 네가 이것이 매우 멋있다고 생각한다면, 나에게 별 하나를 주어라!

총결산

우리는 도구를 뛰어넘는 상태 관리, 전 세계 중개인의 상태 관리를 겪었고, 현재 우리는 연결을 사용하여 우리의 상태(전 세계 또는 현지)를 관리하고 있다.우리는 이미 가변 (redux) 과 가변 (mobx) 스케줄링을 따랐고, 현재 우리가 직면한 것은 가변 생산 가변 스케줄링이다.당신은 어떤 것을 선택할 것입니까?