Redux(+React) を使用して階層構造を操作していますが、2 つの質問があります。
- Reduxでポリモーフィズムを実装するには?
- 「アクションバブリング」の作り方
私の質問はより正確に表現されています：
- .
Redux を使用して、React で構造コード エディターを作成しています。構造エディターとは、ノードを含むツリー構造があり、アプリがプレーン テキストではなく AST で動作することを意味します。
これらのノードにはさまざまなタイプがあります (これは CSS ファイルを編集するためのエディターであるため、これらのタイプは「ルール」、「宣言」、「プロパティ」、「値」などですが、何らかのタイプを持っていることがより重要です) . したがって、JSにはプロパティtypeを持ち、typeその...タイプを決定するオブジェクトがあります;）
したがって、次のようなノードがあるとします。
{
type: 'property',
id: 4,
rule: '.content > ul > li',
children: [...blah blah......]
}
そして、私はそのようなものを書くことができるようにしたいと思います:
store.dispatch({type: 'click', nodeId: 4})
クリック用。しかし、 type のノードをクリックすると、 type のruleノードをクリックする以外の効果があると思いますproperty。ポリモーフィズム (ただし<Node />、コードの重複を防ぐために 1 つの反応コンポーネントが必要です)。
スイッチ/ケースまたは独自のサブ関数を作成することでそれを達成できることはわかっていますが (アクションを関数に委譲することを意味します)、車輪を再発明したくありません。ポリモーフィズムのサポートは、私のアプリケーションだけでなく、多くのアプリケーションで役立つと思います。
では、Redux でポリモーフィズムを実現するにはどうすればよいでしょうか。
2.、
アクション バブリングに関する 2 番目の質問。たとえば、次のようなツリー構造を取得したためです。
{
type: 'rule',
rule: 'body div',
id: 1,
children: [
{
type: 'declaration',
id: 2,
children: [
{type: 'property', name: 'display', id: 3},
{type: 'value', value: 'block', id: 4},
]
}
]
}
そして、その構造をレンダリングする適切な React コンポーネントがあります (私はダム関数ベースのステートレスな React 0.14 コンポーネントを持っているので、コンポーネントのコードは今のところあまり重要ではないと思います)。とにかく<Node/>、単一の AST ノードを表すコンポーネントを取得しました。
たとえば、ユーザーが id=3 ( {type: 'property', name: 'display', id: 3},) のノードをクリックすると、アクションがノードの親 (この場合は id=2 の宣言ノードと id=1 のルール ノード) に自動的に「バブル」するようになります。
私の知る限り、Redux には「アクション バブリング」はありません。多分それはあるべきですか？それとも、私が達成したいことは他の手段で実現できるのでしょうか? (「アクション バブリング」とは、ブラウザの JavaScript イベントの「イベント バブリング」に似たものを意味します。バブリングしたいだけで、redux actionsDOM イベントをバブリングさせたくない (これはまったく別のことです)。アクションを還元したい私が「バブリング」と書いたとき、私は実装ではなく全体的な設計パターンを指しています。
そして、これらは私の2つの質問でした:)