React js、還元状態をローカル状態に保存する最良の方法は何ですか？

Question

私は還元剤がtablesであり、状態の1つがmainTablesである。私はreact-dndを使用してこれらのテーブルを配置しています。

const initialState = { 
channel: null, 
errors: null, 
mainTables: [], 
takeaways: [], 
showMainTables: false, 
showTakeaways: false, 
}; 

ここで、私のtables_containerは以下のようになります。

constructor() { 
super(); 
this.state = { 
    tables: [] 
} 
this.fetchTables = this.fetchTables.bind(this); 
this.moveTable = this.moveTable.bind(this); 
this.saveTables = this.saveTables.bind(this); 
} 

componentDidMount(){ 
this.fetchTables() 
} 

fetchTables() { 
    httpGet('/api/v1/tables') 
    .then((response) => { 
    this.setState({ 
     tables: response.main_tables 
    }); 
    }); 
}; 

table_containerユーザがdrag and dropを通してそれを位置決めするtableを移動させることができるテーブルの容器です。私はmainTablesをすべてのオブジェクトを格納するmainTableに持っていますが、私はをローカル状態のtablesに格納するために使用します。ユーザーがテストのためだけにテーブルを移動し、好きな場合はsaveボタンをクリックして保存できます。彼らはそれが好きではない場合、彼らはちょうどページを去ることができます。したがって、ユーザーがテーブルを移動するときには常に還元状態を変更する必要はありません。しかし、この方法では問題があります。ユーザーがテーブルを作成したときにthis.state.tablesを更新しません。をcomponentDidMountに追加します。だからちょうど作成されたテーブルを表示するには、ユーザーがページを更新する必要があります..1）還元状態がローカル状態（this.state）に格納され、 ？出来ますか？ 2）新しいテーブルを作成するときにfetchTablesに電話できますか？そしてどうやって？

事前に感謝..

----方法

render() { 
if (this.props.tables.showMainTables ==true){ 
const { hideSourceOnDrag, connectDropTarget, number } = this.props; 
const { tables } = this.state; 
return connectDropTarget(
    <div style={styles}> 
    {Object.keys(tables).map((key) => { 
     const { x, y, number } = tables[key]; 
     return (
     <Table 
      key={key} 
      id={key} 
      x={x} 
      y={y} 
      number={number}> 

     </Table> 
     ); 
    })} 
    <button onClick={this.saveTables}>Save</button> 
    </div>, 
); 

} 

else return false; 
} 

Answer 1

私はcontructor(props)とcomponentWillReceivePropsを使用してグローバル状態からローカル状態を保存しました。

したがって、私はconst mainTable = this.props.tables.mainTablesを作って、mainTableをtable_containerに渡しました。

constructor(props) { 
super(props); 
    this.state = { 
    tables: props.mainTables 
} 
} 

であり、上記と同様のコンストラクタを作成した。更新されたデータを入手してローカル状態に更新するには、私は使用しました。componentWillReceiveProps

componentWillReceiveProps(nextProps){ 
if(this.state.tables.length != nextProps.mainTables.length){ 
    this.setState({tables: nextProps.mainTables}) 
}} 

Answer 2

通常は、例えばストアを作成することになるでしょうをレンダリング追加、編集テーブルストアは、外部操作、すなわちネットワークコールが発生した後の初期状態およびその後の状態を含む。

あなたのコンポーネントはそれを購読します。また、ストアでは、状態が変わるたびにコンポーネントに通知されます。そして、単純に何かをすることができますthis.setState(TablesStore.getTablesState())

あなたのコンポーネントからのフェッチ要求の送信は、非常にお勧めです。 また、あなたのアプリケーションの基盤となる完全なアーキテクチャを探している場合、私は、それが簡単にチュートリアルのために十分に長くなるので、SOがそのための最良の場所だとは思わない。