Question

我有tables的缩减器，其中一个州是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是一个表格容器，用户可以移动table来定位drag and drop。即使我在reducer中有mainTables存储mainTable的所有对象，我使用fetchTables将main_tables存储到本地状态tables，因为我希望用户移动表格进行测试，如果他们喜欢，可以点击save按钮存储。如果他们不喜欢它，他们就可以离开页面。因此，当用户移动表时，它不必一直改变redux状态。但是用这种方法存在问题。当我在fetchTable()中使用componentDidMount时，当用户创建表时，它不会更新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;
}

Answer 1

通常你会想要创建一个商店，例如TablesStore将包含任何外部操作（即网络调用）之后的初始状态和任何后续状态。

您的组件将订阅它。每次状态发生变化时，商店都会让您的组件知道。然后你可以简单地做一些像this.setState(TablesStore.getTablesState())

这样的事情

非常不鼓励从您的组件发送提取请求。此外，如果您正在寻找一个完整的体系结构来构建您的应用程序，我不认为SO是最适合的地方，因为这很容易变得足够长的教程。

Answer 2

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

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

2 个答案: