인사말! Remini - React의 효과적인 상태 관리 🌴

➪ 배우기 쉬운
➪ 작고 빠름
➪ 모든 체중계 앱용

코딩 시간 절약!

최소한의 잘 구조화되고 유연한 코드베이스는 React 애플리케이션을 유지 관리하고 성장시키는 데 개발자 시간을 많이 절약합니다.

작동 원리

일반적으로 React 프로젝트를 막 시작했거나 매우 작은 프로젝트가 있는 경우 코드베이스가 짧고 이해하기 쉬우며 간단하므로 일반적인 문제의 예를 Google에서 쉽게 찾을 수 있습니다.

그러나 애플리케이션의 비즈니스 로직을 작성할 때 코드가 커지고 풍부한 파일, 트릭 및 코드 조각을 이해하기가 점점 더 어려워집니다.

로직의 위치와 애플리케이션 유지 관리를 줄이지 않고 원하는 만큼 코드를 작성할 수 있는 방법을 명확하게 이해해야 합니다.

비즈니스 요구에 따라 대규모 애플리케이션으로 쉽게 확장할 수 있는 간단한 React 애플리케이션을 만드는 방법

최소한의 상태와 편리하게 분리된 로직으로 코드를 깔끔하게 구성하는 방법

애플리케이션 속도를 높이고 상용구를 줄이는 방법

제 답은 Remini입니다 😍

시작하다

처음에는 상태가 있습니다 😊

const $user = box({ email: '[email protected]' })
const $enabled = box(true)
const $counter = box(42)
const $books = box([ 'The Little Prince', 'Alice in Wonderland' ])

두 번째로 상태를 React 구성 요소에 바인딩하십시오!

const Books = () => {
  const books = useBox($books)
  return <ul>
    {books.map(book => <li>{book}</li>)}
  </ul>
}

세 번째로 상태 업데이트 👍

const BookForm = () => {
  const [name, setName] = React.useState('')
  return <p>
    <input 
      value={name}
      onChange={event => setName(event.target.value)} 
      />
    <button
      onClick={() => update($books, books => [...books, name])}
      >Add</button>
  </p>
}

넷째, 당신의 논리를 공유하세요 😉

// ./books.shared.js
export const $books = box([])
export const $loading = box(false)

export const load = async () => {
  write($loading, true)

  const response = await fetch('https://example.com/api/books')
  const books = await response.json()

  write($books, books)
  write($loading, false)
}

const BooksLoad = () => {
  const loading = useBox($loading)
  return <p>
    {loading ? 'Loading...' : (
      <button onClick={load}>Load</button>
    )}
  </p>
}

여러 매장 vs 단일 매장

표현 중 하나는 다중 저장소 아키텍처입니다. 주된 이유는 독립 모듈 분해입니다. 유연한 성장을 위해서는 코드를 분리해야 합니다. 분리된 모듈 구성 위에 앱을 빌드해야 합니다. 각 모듈에는 일부 데이터와 논리가 포함되어 있습니다.

각 모듈을 개별적으로 개발하고 테스트할 수 있기 때문에 매우 좋은 아키텍처 결정입니다. 프로젝트 간에 모듈을 쉽게 재사용할 수 있습니다. 그리고 앱의 일부에 대해 지연 로드를 사용하는 경우 아무런 문제가 없으며 가져오기만 하면 됩니다. 그것은 간단해야합니다!

확인. 첫 번째는 분리된 모듈 분해이고 다음은 무엇일까요?

각 모듈에 고유한 상태와 논리가 있는 경우 별도의 저장소를 사용하여 데이터 흐름을 제어하는 ​​것이 매우 편리합니다.

그 순간 가정을 세우기에 좋은 시간입니다. 각 저장소는 단순해야 하며 깊게 중첩된 상태를 만드는 것을 권장하지 않습니다. 더 좋은 방법은 KISS 원칙을 따르는 것입니다.

매장에서 선택

상태 작업 중에 가장 자주 사용되는 기능 중 하나는 선택입니다. 선택은 성능상의 이유로 상태의 변형입니다. 내부에서 사용된 데이터를 업데이트할 때만 보기 구성 요소를 업데이트해야 합니다. 이것이 렌더링 최적화입니다.

예를 들어 사용자 상태가 크면 많은 사용자 설정과 일부 항목이 있습니다. 아바타 보기 구성 요소가 있는 경우 각 사용자 상태 업데이트가 아니라 아바타가 변경될 때만 업데이트해야 합니다.

import { box, select } from 'remini'

const $user = box({
  name: 'Joe',
  email: '[email protected]',
  settings: {},
  avatar: 'https://avatar.com/1.jpg'
})

const $avatar = select($user, user => user.avatar)

import { useBox } from 'remini/react'

const Avatar = () => {
  const avatar = useBox($avatar)
  return (
    <img src={avatar} />
  )
}

작지만 매우 효과적인 최적화를 만드는 것이 얼마나 쉬운지 알 수 있습니다!

모든 것을 렌더링할 필요는 없습니다. 필요한 만큼만 렌더링해야 합니다! 그 이상도 이하도 아닌)

점포 구성

위층에서 성장하는 응용 프로그램을 단계별로 진행하면 여러 매장을 하나로 결합하는 데 필요한 경우가 있습니다. 간단해야 함)

import { box, read, wrap } from 'remini'

const $firstName = box('John')
const $lastName = box('Doe')

const $fullName = wrap(() => {
  return read($firstName) + ' ' + read($lastName)
})

여기서는 일부 보기 구성 요소에서 편리하게 사용할 수 있도록 여러 저장소를 하나로 결합합니다.

참조

The dark mode switcher

Shared state

Work together with Redux

Pure reactivity in Node.js

설치

npm install remini
# or
yarn add remini

코드를 즐기세요!

Github: https://github.com/re-js/remini
NPM: https://www.npmjs.com/package/remini