React Easy State의 실용적인 패턴

React Easy State는 두 가지 기능과 두 가지 관련 규칙이 있는 투명한 반응성 상태 관리 라이브러리입니다.

구성 요소를 항상 view()로 포장하십시오.

항상 상태 저장소 개체를 store()로 래핑합니다.

import React from 'react'
import { store, view } from 'react-easy-state'

const counter = store({
  num: 0,
  incr: () => counter.num++
})

export default view(() =>
  <button onClick={counter.incr}>{counter.num}</button>
)

필요할 때 보기를 자동으로 업데이트하기에 충분합니다. 상태 저장소를 구성하거나 변경하는 방법은 중요하지 않으며 구문적으로 유효한 모든 코드가 작동합니다.

아직 Easy State에 익숙하지 않더라도 걱정하지 마세요. 계속할 수 있을 만큼 이미 충분히 알고 있습니다. 또는 확인할 수 있습니다here.

국가 관리 및 맥주

Easy State는 상태를 관리하는 방법에 신경 쓰지 않고 모든 종류의 상태 변경을 찾아 필요할 때 뷰를 업데이트합니다. 이 문서는 상태 관리 패턴에 관한 것입니다. 아름답게 단순하지만 무수히 많은 독단적인 라이브러리에 가려진 패턴입니다.

다음 섹션에서는 식사에 맞는 맥주를 찾는 작은 앱을 통해 이러한 패턴을 살펴봅니다. 계속 읽기 전에 try it out을 추천합니다.

구성 요소 간에 전역 상태 공유

React의 state 및 setState는 종종 로컬 상태를 관리하기에 충분하지만 대규모 프로젝트에는 더 많은 것이 필요한 경향이 있습니다. 일부 정보는 전역적으로 더 잘 저장됩니다.

JavaScript 객체는 싱글톤이며 ES6import 및 export 파일 간에 공유할 수 있습니다. 이것은 그것들을 전역 상태를 저장하기 위한 완벽한 후보로 만듭니다.

import { store } from 'react-easy-state'

const appStore = store({
  beers: [],
  fetchBeers (filter) {
    appStore.isLoading = true
    appStore.beers = [{ name: 'Awesome Beer' }]
    appStore.isLoading = false
  }
})

export default appStore

Notice how the fetchBeers method uses appStore.beers instead of this.beers. It is a neat trick, which makes object methods safe to be passed as callbacks.

더미fetchBeers 방법에 대해서는 아직 걱정하지 마십시오. 나중에 더 스마트하게 만들 것입니다. appStore는 아래의 NavBar 구성 요소와 같이 모든 파일에서 가져와서 사용할 수 있습니다.

import React from 'react'
import { view } from 'react-easy-state'
import SearchBar from 'material-ui-search-bar'
import { LinearProgress } from 'material-ui/Progress'
import appStore from './appStore'

export default view(() =>
  <div className='searchbar'>
    <SearchBar onRequestSearch={appStore.fetchBeers} placeholder='Some food ...'/>
    {appStore.isLoading && <LinearProgress/>}
  </div>
)

가져온 맥주를 표시하려면 다른 구성 요소가 필요합니다. 당연히 보기를 맥주 배열에 매핑하기 위해 전역appStore을 가져와야 합니다.

import React from 'react'
import { view } from 'react-easy-state'
import appStore from './appStore'
import Beer from './Beer'

export default view(() =>
  <div className='beerlist'>
    {!appStore.beers.length
      ? <h3>No matching beers found!</h3>
      : appStore.beers.map(beer => <Beer key={beer.name} {...beer }/>)
    }
  </div>
)

Easy State re-renders the above NavBar and BeerList components when appStore.isLoading or appStore.beers changes.

비동기 작업

fetchBeers 메서드에 생명을 불어넣어 봅시다. 변경할 사항이 많지 않습니다. 비동기 메서드로 전환해야 하며 맥주를 위조하는 대신 API에서 가져와야 합니다.

import { store } from 'react-easy-state'
import * as api from './api'

const appStore = store({
  beers: [],
  async fetchBeers (filter) {
    appStore.isLoading = true
    appStore.beers = await api.fetchBeers(filter)
    appStore.isLoading = false
  }
})

export default appStore

이상적인 저장소는 상태 조작만 담당하며 다른 것은 없습니다. 구성 요소의 보기 관련 논리와 API 계층의 네트워킹 논리를 추상화하는 것이 좋습니다. 이는 구성 요소의 이벤트 핸들러에서 이벤트를 해체하고 별도의 API 계층에서 인증 및 헤더를 처리하는 것을 의미할 수 있습니다.

우리의 API는 간단합니다. 전달된 음식에 맞는 맥주를 가져오는 단일 기능이 있습니다.

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://api.punkapi.com/v2'
})

export async function fetchBeers (filter) {
  const { data } = await api.get('/beers', {
    params: { food: filter }
  })
  return data
}

This example uses the Punk API to find beers. Check it out if you need some free data for your coding demos.

로컬 상태 캡슐화

전역 상태는 큰 응용 프로그램에 중요하지만 로컬 상태도 편리할 수 있습니다. 즉, 프로젝트 구조와 재사용성을 향상시킵니다. 어느 것을 언제 사용할지 결정하는 것은 귀하의 책임입니다.

그림과 설명 보기 사이를 전환하기 위해 일부 로컬 상태를 사용할 수 있는 Beer 구성 요소가 아직 없습니다. 구성 요소에 상태 저장소 개체를 속성으로 두는 것은 이를 구현하는 간단한 방법입니다.

import React, { Component } from 'react'
import { view, store } from 'react-easy-state'
import Card, { CardContent, CardMedia } from 'material-ui/Card'

class Beer extends Component {
  store = store({ details: false })

  toggleDetails = () => this.store.details = !this.store.details

  render () {
    const { name, image_url, food_pairing, description } = this.props
    const { details } = this.store

    return (
      <Card onClick={this.toggleDetails} className='beer'>
        {!details && <CardMedia image={image_url} className='media'/>}
        <CardContent>
          <h3>{name}</h3>
          {details
            ? <p>{description}</p>
            : <ul>
                {food_pairing.map(food => <li key={food}>{food}</li>)}
              </ul>
            }
        </CardContent>
      </Card>
    )
  }
}

export default view(Beer)

Easy State re-renders the Beer component whenever store.details changes. It doesn’t matter if it is a local store or a shared global one, you can even mix the two in a single component.

details 플래그는 맥주 카드의 두 보기 사이를 전환합니다. 맥주 개체 자체에 저장할 수도 있지만 격리된 로컬 저장소에 저장하는 것이 더 깔끔한 접근 방식입니다. 실제 데이터를 오염시키지 않아야 하는 보기 관련 메타데이터를 저장합니다.

결론

Npm에는 프런트 엔드 개발을 엄청나게 단순화하는 놀라운 도구가 포함되어 있습니다. 필요할 때 사용하는 것을 주저하지 말고 설치하기 전에 항상 생각하십시오. 때로는 더 적은 도구로 생산성을 높일 수 있습니다.

여러분 중 일부는 위의 스니펫을 패턴이라고 부르지도 않을 것입니다. 대부분의 개발자에게 익숙한 코드 예제일 뿐입니다. 그래도 작은 앱을 만들기에는 충분했습니다.

이 기사가 귀하의 관심을 끌었다면 공유하여 도움을 주십시오. Easy State repo도 확인하고 가기 전에 별표를 남겨주세요.

고맙습니다!
(이 기사는 원래 Medium에 게시되었습니다.)