React js，將redux狀態存儲到本地狀態的最佳方法是什麼？

我有減速器tables和其中一個州mainTables。我正在使用react-dnd來定位這些表格。React js，將redux狀態存儲到本地狀態的最佳方法是什麼？

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是表，其中用戶可以移動table通過drag and drop將它定位的容器。即使我有mainTables在減速器中存儲mainTable的所有對象，我使用fetchTables來將main_tables存儲到本地狀態tables，因爲我希望用戶移動表格以進行測試，然後如果他們喜歡它，可以通過單擊save按鈕來存儲它。如果他們不喜歡，他們可以離開這個頁面。所以當用戶移動表格時，它不必一直改變redux狀態。但是用這種方法，有一個問題。當我在componentDidMount中使用fetchTable()時，它在用戶創建表時不會更新this.state.tables。所以看到剛剛創建表，用戶必須刷新頁面..

所以，我要問的是， 1）我怎麼能存儲Redux的狀態進入本地狀態（this.state）和更新時，Redux的狀態更新？可能嗎？ 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; 
}

來源

2017-02-17 D.R

我用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}) 
}}

來源

2017-02-17 15:22:39

通常你會想例如創建存儲在任何外部操作（即網絡呼叫發生）之後將包含初始狀態和任何後續狀態的TablesStore。

您的組件將訂閱它。每當狀態發生變化時，商店都會讓你的組件知道。然後你可以簡單地做一些事情，如this.setState(TablesStore.getTablesState())

從組件發送提取請求是非常沮喪的。另外，如果你正在尋找一個完整的架構來建立你的應用程序的基礎，我不認爲這是最好的地方，因爲這將很容易變得足夠長的教程。

來源

2017-02-17 05:55:05

感謝您的回覆。但我完全不理解你的答案......我想要做的是將'tables'初始狀態的'mainTables'存儲到本地組件的狀態'this.state.tables' ..我將'mainTables'傳遞給本地組件，並試圖在'componentDidMount'和'render'中設置'setState'，但它們都不起作用..所以我在尋找如何將'mainTables'存儲到本地組件的狀態。 –

你能告訴我你的渲染方法嗎？ –

我剛剛添加了渲染方法.. –

React js，將redux狀態存儲到本地狀態的最佳方法是什麼？

回答

相關問題