Storecle -反応と固体のためのきちんとしたアプリケーションの状態管理

Storecleはきちんとした一方向アプリケーションの状態管理のためのReact and Solid (❤️).

機能
Storecleは、コンテキストAPIを使用してアプリケーションのワイドアクションとその結果にアクセスできるシンプルな精神モデルを使用しています.
これは、4つの主なビルディングブロック、すなわち、ストア、ユーザーのアクション(アクションは、ユーザーによって引き起こされる)、データサプライヤー(アクション前に実行されるアクション)とリロードの種類(アクション再トリガグループ)から成ります.
アクションは暗黙のうちにストアにバインドされ、戻り/解決によって結果を書き込むだけの関数です.
その後、結果は自分の名前でアクセス可能です.
コード再利用性を改善するために、データ供給元はミドルウェアパターンを使用します.これらは、指定した順序で実行され、ストアのスナップショットを1つから別のものへ渡します.

両方とも使えますReact and Solid (ある程度のフレームワークは不可知論).

コンテキストAPIとuseEffect / createEffect 指定したストアの変更に基づいてアクションをトリガーする.

これは、ミドルウェアのパターンを適用することにより、ビジネスロジックを、再利用可能な機能に分割することを容易にします.

それは命名を簡素化し、自分の名前でアクションの結果にアクセスできるようにすることでノイズを減らす.

それは、受信データ(例えばウェブソケットから)にUIを供給している行動にエレガントなアプローチを提供します.

IDEのコード自動補完で動作させます.

動機
私❤️ redux、しかし、それは悪用される余地の多くを残します.それゆえに、Storecleは開発者に自制とより多くのツールと自己制限的なデザインに依存しないようにする私の提案です.

アプリケーション全体のロジックをビューから分離する簡単な方法を提供するには、次の手順に従います.

いいえインライン:データフェッチ、トランス、条件.

他のアクションの完了時にネストされたアクション発送係.

アクションの再利用性とモジュール化を容易にする.

段階的に進むReact 使用する開発者Solid .

インストール
反応

yarn add @gluecodes/storecle-react

or

npm i @gluecodes/storecle-react

ソリッド

yarn add @gluecodes/storecle-solid

or

npm i @gluecodes/storecle-solid

どちらかと一緒に動くReact or Solid また、あなたのアプリケーションにインストールする必要があります.詳細は、独自のドキュメントを参照ください.

用途
このモジュールは、アプリケーションのさまざまな部分で特定のフレームワークにインポートできる3つの構造をエクスポートします.

import { 
  builtInActions, 
  PageProvider, 
  useAppContext 
} from '@gluecodes/storecle-react'

or

import { 
  builtInActions, 
  PageProvider, 
  useAppContext 
} from '@gluecodes/storecle-solid'

例のために、私は堅実なバージョンを使いました.
すぐに公式のスターターテンプレートがリリースされます.このライブラリを使用すると、単純なカウンタの例を使用して以下に説明される特定のパターンに従うことを意味します.

メンタルモデル

See: Code Sandbox example for React.

See: Code Sandbox example for Solid.

ファイルツリー:

.
├── actions
│   ├── dataSuppliers (#2)
│   │   └── index.js
│   ├── reloadTypes.js (#4)
│   └── userActions (#3)
│       └── index.js
├── index.jsx (#1)
├── Layout.jsx (#5)
└── partials (#6)
    └── Counter
        └── index.jsx

1ページコンテナ
ページプロバイダーは、単一のアプリケーションコンテキストの周りに与えられたレイアウトをラップします.

dataSupplierPipeline - データ供給元が実行される順序を提供する配列.

dataSuppliers - データ供給元を含むオブジェクト.

getLayout - ページレイアウトを返す関数.

reloadTypes - リロードタイプを含むオブジェクト.

userActions - ユーザーアクションを含むオブジェクト.

onError - エラーがデータサプライヤーまたはユーザーアクションのいずれかにスローされたときに引き起こされる関数.

./index.jsx

import { PageProvider } from '@gluecodes/storecle-solid'

import * as dataSuppliers from './actions/dataSuppliers/index'
import * as userActions from './actions/userActions/index'
import * as reloadTypes from './actions/reloadTypes'

import Layout from './Layout.jsx'



export default () => (
  <PageProvider
    dataSupplierPipeline={[
      dataSuppliers.getTexts,
      dataSuppliers.getCounter
    ]}
    dataSuppliers={dataSuppliers}
    getLayout={() => Layout}
    reloadTypes={reloadTypes}
    userActions={userActions}
    onError={(err) => {
      console.error(err)
    }}
  />
)

2 .データ供給元
データ供給元はレンダリングの前にデータを提供する.再読み込み型に基づいてキャッシュされたデータを解決する方法を示す初期値を返します.

buildInActions - 次の組み込みユーザーアクションを含むオブジェクト

onStoreChanged - ストア変更時にトリガされるコールバックを受け取る関数.

runUserActions - 複数のユーザーアクションを一度に実行できる機能.

runDataSuppliers - リロードタイプ名を受け取る関数.それはレガシーアプリとの統合を容易にさらされていることに注意してください.データサプライヤーが提供された再ロードタイプに基づいて暗黙のうちに再ロードされるので、手動でそれを呼び出しないでください.

それぞれのデータサプライヤーは2つの引数を渡しますresultOf and nameOf .

resultOf - 与えられたデータ供給者またはユーザーアクションの結果を提供する機能.

nameOf - データサプライヤー、ユーザー動作または再ロードタイプの名前を提供する機能.

データサプライヤーは、同期または非同期のいずれかであることができますし、中央の店に戻る/解決に書き込む.

./actions/dataSuppliers/index.js

import { builtInActions } from '@gluecodes/storecle-solid'
import { reFetchCounter } from '../reloadTypes'



export function getCounter (resultOf, nameOf) {
  const reloadType = resultOf(builtInActions.runDataSuppliers)
  const shouldFetch =
    reloadType === 'full' || reloadType === nameOf(reFetchCounter)

  if (!shouldFetch) {
    return resultOf(getCounter)
  }

  return global.sessionStorage.getItem('appWideCounter') || 0
}



export function getTexts (resultOf) {
  if (resultOf(builtInActions.runDataSuppliers) !== 'full') {
    return resultOf(getTexts)
  }

  return {
    Click: 'Click'
  }
}

ユーザアクション
ユーザーがトリガするアクション../actions/userActions/index.js

export function incrementCounter (counter) {
  const incrementedCounter = Number(counter) + 1

  global.sessionStorage.setItem('appWideCounter', incrementedCounter)
}

4リロードタイプ
実行されたユーザーのアクションに基づいて再データのサプライヤーを実行するアプリケーションを指示する方法です.

再ロードタイプのグループのユーザーアクションを一緒に実行の結果としてすべてのデータサプライヤーを再ロードするようにアプリを教えてください.

そのユーザーアクションのいずれかがトリガされると、アプリケーションは、組み込みの下にリロードタイプ名を設定しますrunDataSuppliers そしてすべてのデータ供給元を再読み込みします.

データ供給元は、リロードタイプ名に基づいて初期結果を返すことによってキャッシュから利益を得ることができます.

それぞれのリロードタイプはnameOf を返します.

nameOf - ユーザアクションの名前を提供する関数.

./actions/reloadTypes.js

import { incrementCounter } from './userActions/index'

export const reFetchCounter = (nameOf) => [
  nameOf(incrementCounter)
]

レイアウト
ページレイアウト以外の何もない../Layout.jsx

import Counter from './partials/Counter/index.jsx'

export default () => (
  <div className='container'>
    <Counter />
  </div>
)

6章
パーティションは、アプリケーションのコンテキストを介してアプリケーションの状態にアクセスするUIの自己完結型の作品です.

useAppContext - 3つの項目の配列を返す関数です.resultOf , action , nameOf .

resultOf - 与えられたデータ供給者またはユーザーアクションの結果を提供する機能.

action - ユーザアクションをトリガーする関数.

nameOf - データサプライヤーまたはユーザーアクションの名前を提供する関数.

./partials/Counter/index.jsx

import { useAppContext } from '@gluecodes/storecle-solid'

import { getCounter, getTexts } from '../../actions/dataSuppliers/index'
import { incrementCounter } from '../../actions/userActions/index'



export default () => {
  const [resultOf, action] = useAppContext()

  return (
    <button
      onClick={() => {
        action(incrementCounter)(
          resultOf(getCounter)
        )
      }}
    >{resultOf(getTexts)?.Click}: {resultOf(getCounter)}</button>
  )
}

オープンソースはこちらGithub レポ.コメントやレポの問題であなたのアイデアを提案してお気軽に.あなたがそれを好むならば、星は有り難いです😉