地域の状態を保存する

Question

私のアプリでは、いくつかのコンポーネントを使用しています。ContainerそれぞれContainerには、Buttonsがあります。

このアプリのstateに応じて、Buttonsはクリック可能（または無効）です。 Buttonが無効になっているかどうかにかかわらず、ローカルstateがのそれぞれContainerで管理されます。 Appの結果と状態を保存して読み込むことができます。 各Containerから「エキス」Buttonsのstateへ 私は、保存（または負荷）のApp、そのかなりハード：

そしてここで問題にしています。グローバルstate (Redux)での保存はかなり簡単です。

しかし、どのように私は、各Containerとは、どのように私は、各Containerにそれをフィードバックすることができますからローカルstateを保存することができますか？

ローカルstateの読み取りは、Componentの子からメソッドを呼び出す親Componentによって管理されます。私はこれが反パターンであることを認識していますが、動作します。

export class SomeConmponent { 
.... 

    onClickSaveProjecthandler(event) { 
     const localStateProjectSettings = this.childProjectSettings.getLocalState(); 
     const localStateLayerFilter = this.childLayerFilter.getLocalState(); 

     return { 
      "ProjectSettings": localStateProjectSettings, 
      "Filter": localFilter 
     }; 
     } 


    render() { 
     return(
      <ProjectSettingsContainer onRef={ref => (this.childProjectSettings = ref)}/> 
     ) 
    } 
} 

もっと良い提案がありますか？

Answer 1

あなたがすでに述べたように、reduxを使用して真実の単一の点を持つことは素晴らしい考えです。状態をコンテナに「フィード」するには、状態と小道具をコンポーネントにマップする必要があります。

これはoficialドキュメントから持ってきたコンテナの例です：

接続は、すべての魔法を行います。

Answer 2

あなたはReduxを使用することができ、何とかそのアーキテクチャをと同義であると誤解しています。州のみです。 Reduxが作成された理由の1つは、複数の独立したコンポーネントの状態を保存するという問題に取り組むことでした。

しかし、ここでは全く異なる答えが得られます。なぜグローバルシリアライザを使用して各コンポーネントを接続してみませんか？グローバル変数を参照する考え方が気に入らなければ、Reactで動作するある種の依存性注入（DI）フレームワークを作成する方が良いでしょう。私はAntidoteJSと呼ばれるライブラリを作成しました。これはまさにこれを行います。あなたはそれを使用する必要はありませんが、どのようにそれを行うことができるかを示しています。ただthe sourceを見てください。

ここはすばやく汚いものです。私はそれをテストしていませんが、それは基本的な考え方を示しています。あなたは既にReduxの言及

import { inject } from "antidotejs" 

export class MyComponent extends React.Component { 

    @inject("StateSerializer") 
    serializer 

    constuctor(props, children) { 
    super(props, children); 
    this.serializer.load(props.id); 
    } 

    setState(newState) { 
    super.setState(newState); 
    this.serializer.save(newState); 
    } 

}