リバースセットステートとフラックスアクションの更新

Question

フラックスアクションを使用してストアを更新し、コンポーネントの状態を更新するには、クリック機能が必要です。

例： 私はストーリーのデータを持つフォームフィールドと、フォームのモーダルが開いていると言うステートを持っています。

// Initial state 
return { 
    story: this.props.story, 
    modalIsOpen: true 
} 

-

// Click function to close the modal 
closeModal: function(e){ 
    e.preventDefault(); 
    story.update(newStory) // <== Flux action to update the story, which then updates this component 
    this.setState({modalIsOpen: false}) // <== To actually close the modal 
} 

しかし、何でも私が二番目に最初のランを入れていないようです。私はstory.update(newStory)を持っているのであれば、まずそれが1ではなくthis.setState({modalIsOpen: false}) およびその逆...

すべてのアイデアは私が間違ってやっているか、どのようにその両方を実行するためにどのようなことを実行しますか？

Answer 1

あなたのstory.update()後this.setState()を必要はありません。
アクションコールの後に、this.setState()が実行される前にコンポーネントが再レンダリングされた可能性があります。 流れは次のようになります。

• コンポーネントはstory.update()
• 店は店舗が
• あなたのコンポーネントを変更発する
• をディスパッチャとアップデートするリッスン呼び出し、ストアのアップデートへの対応コンポーネント内
• 方法を変更すること聞くんsetState({modalIsOpen: false})。

また、あなたのstoryた状態である必要はありませんようだ：あなたのコンポーネントは、単に単にthis.props.storyをレンダリングすることができます。

Answer 2

あなたは、コンポーネントのコンテキストにイベントハンドラメソッドをバインドすることを忘れかもしれません（代わりにReact.createClass()の）コンポーネントに反応作成するためのES2015クラスを使用している場合。簡単に行うにはいくつかの方法がありますが、ここでは良いチュートリアルです：http://www.ian-thomas.net/autobinding-react-and-es6-classes/

私はautobind-decoratorを好んで使用します。これでコンポーネントを次のようなものに修正する必要があります：

import autobind from "autobind-decorator"; 

class Foo extends React.Component { 

    /* ... */ 

    @autobind 
    closeModal: function(e){ 
    e.preventDefault(); 
    story.update(newStory) // <== Flux action to update the story, which then updates this component 
    this.setState({modalIsOpen: false}) // <== To actually close the modal 
    } 

}