反応容易な状態での実用パターン

反応の簡単な状態は、2つの機能と2つの付随する規則による透明な反応状態管理ライブラリです.

常にコンポーネントをラップする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>
)

これは自動的に必要なときにビューを更新するために十分です.それはどのように構造や変異あなたの状態の店、任意の構文的に有効なコード作品の問題ではない.
あなたは簡単な状態に精通していない場合は心配しないでください、あなたはすでに十分に知っている.また、それをチェックアウトすることができますhere .

国家管理とビール

簡単な状態はあなたの状態を管理する方法について気にしない、それは状態の変異のすべての種類を見て、必要なときにビューを更新します.この記事は国家管理パターンについてです.美しくシンプルですが、無秩序なライブラリの無数のパターン.
次のセクションでは、あなたの食事のためのマッチングビールを見つける小さなアプリを通じて、これらのパターンを探る.私はあなたにtry it out 読む前に.

コンポーネント間のグローバル状態の共有

反応するstate and setState ローカル州を管理するのに十分であるが、大きいプロジェクトはより多くを必要とする傾向があります.いくつかの情報をより良い世界的に保存されます.
JavaScriptオブジェクトはsingletonsです、そして、ES 6でファイルの間で共有されることができますimport and 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 方法、しかし、我々は後でそれをスマートにします.The 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 メソッド.変更することはあまりありません.それは、asyncメソッドに変えられ、それらを偽造する代わりに、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.

カプセル化ローカル州

グローバルな状態は大きいアプリケーションにとって重要です、しかし、ローカル州はちょうど便利でありえます:それはプロジェクト構造と再利用性を改善します.いつ使用するかを決めるのはあなたの責任です.
我々はまだビールコンポーネントを欠落しています.そして、それは絵と説明ビューの間で変わるためにいくつかの地方の州を使うことができました.状態ストアオブジェクトをコンポーネントとしてプロパティとして置くことは、これを実装する簡単な方法です.

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.

The details フラグは、ビールのカードの2つのビューの間をトグル.また、ビールオブジェクト自体に保存することができますが、孤立した地元の店にそれを置くことは、よりクリーンなアプローチです.これは、実際のデータを汚染する必要はありませんビュー関連のメタデータを格納します.

結論

NPMは、巨大な量でフロントエンドの開発を簡素化驚くべきツールが満載です.あなたがそれらを必要とするとき、それらを使用するのをためらわないでください、しかし、あなたがインストールする前に、常に考えてください.時々、より少ないツールでより生産的でありえます.
いくつかのあなたも上記のスニペットのパターンを呼び出すことはありません.ほとんどの開発者がよく知っているコード例です.それでも、彼らは小さなアプリケーションを作成するのに十分以上だった.
この記事があなたの興味を捕らえたならば、それを共有することによって助けてください.また、チェックアウトEasy State repo そして、あなたが行く前に、星を残してください.
ありがとう!
(この記事はもともと公開されましたMedium )