Reactjs React js，将redux状态存储到本地状态的最佳方法是什么？_Reactjs_Redux

Reactjs React js，将redux状态存储到本地状态的最佳方法是什么？

reactjs redux

Reactjs React js，将redux状态存储到本地状态的最佳方法是什么？,reactjs,redux,Reactjs,Redux,我有表的缩减器，其中一个状态是mainTables。我正在使用react dnd定位这些表 const initialState = { channel: null, errors: null, mainTables: [], takeaways: [], showMainTables: false, showTakeaways: false, }; 现在，我的表\u容器如下所示 constructor() { super(); this.state = { tables

我有

表的缩减器

，其中一个状态是

mainTables

。我正在使用

react dnd

定位这些表

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

现在，我的

表\u容器如下所示
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\u container
是一个表格容器，用户可以在其中移动table
，通过拖放来定位它。尽管我在reducer中有mainTables
，其中存储了mainTable
的所有对象，但我使用fetchTables
将main_表存储到表的本地状态，因为我希望用户移动表进行测试，然后如果他们喜欢，可以单击保存按钮来存储它。如果他们不喜欢，他们可以离开页面。所以，当用户移动表时，它不必一直更改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;
}

render（）{
if（this.props.tables.showMainTables==true）{
const{hideSourceOnDrag，connectDropTarget，number}=this.props；
const{tables}=this.state；
返回connectDropTarget(
{Object.keys（tables）.map（（key）=>{
常数{x，y，number}=表[key]；
返回(
);
})}
拯救
,
);
}
否则返回false；
}
通常，您需要创建一个存储，例如TableStore，它将包含初始状态和任何外部操作（如网络调用）发生后的任何后续状态
您的组件将订阅它。每次状态更改时，存储都会让您的组件知道。然后，您可以简单地执行类似于this.setState（tablestore.getTablesState（））

不鼓励从组件发送获取请求。
此外，如果您正在寻找一个完整的架构来为您的应用程序奠定基础，我不认为这是最好的地方，因为这对于教程来说很容易变得足够长。
通常，您需要创建一个存储，例如tablestore，它将包含初始状态和任何外部操作（如网络调用）发生后的任何后续状态
您的组件将订阅它。每次状态更改时，存储都会让您的组件知道。然后，您可以简单地执行类似于this.setState（tablestore.getTablesState（））

不鼓励从组件发送获取请求。
另外，如果你正在寻找一个完整的架构来为你的应用程序打下基础，我不认为这是最好的地方，因为这对于一个教程来说已经足够长了。
我使用构造函数（props）
和组件将接收props
来将全局状态存储到本地状态
因此在视图中，我创建了const mainTable=this.props.tables.mainTables
并将mainTable
传递给table\u容器
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})
}}

我使用constructor（props）
和componentWillReceiveProps
将全局状态存储到本地状态
因此在视图中，我创建了const mainTable=this.props.tables.mainTables
并将mainTable
传递给table\u容器
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})
}}

谢谢你的回复。但我不完全理解你的答案。。。我想做的是将tables
的初始状态的mainTables
存储到本地组件的状态this.state.tables
。。我将mainTables
传递给本地组件，并尝试在componentDidMount
和render
中设置状态。。所以我在寻找如何将mainTables
存储到本地组件的状态。我能从中得到的是，表是一个散列。因此，在构造函数中将其设置为{}
而不是[]
，并且this.props.tables.showMainTables
是否设置为false？您是否尝试过调试以确定是否存在这种情况？您使用的是this.props.tables.showMainTables
而不是this.state.tables.showMainTables
您希望它如何工作？您是否通过props传递tables对象？正如我的问题中所述，我有tables
reducer，它存储与tables
相关的所有状态。其中一个状态是showMainTables
。我有许多表格类型，因此我使用showMainTables
和showtakaways
来启用查看或不查看。这些都不是问题。。我的问题是如何在tables
reducer中获取mainTables
，并将mainTables
存储为组件的本地状态mainTables
是一个数组，其中包含许多table对象。感谢您的回复。但我不完全理解你的答案。。。我想做的是将tables
的初始状态的mainTables
存储到本地组件的状态this.state.tables
。。我将mainTables
传递给本地组件，并尝试在componentDidMount
和render
中设置状态。。因此，我正在寻找如何将mainTables
存储到本地组件的状态。我能做什么