React js, Каков наилучший способ хранения состояния redux в локальном состоянии?

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. Несмотря на то, что у меня есть mainTables в редукторе, где хранятся все объекты mainTable, я использую fetchTables для хранения main_tables до локального состояния tables, потому что я хочу, чтобы пользователи перемещали таблицы только для тестирования, а затем, если им это нравится, они могут сохранить его, нажав кнопку save. Если им это не нравится, они могут просто покинуть страницу. Таким образом, он не должен менять состояние редукции все время, когда пользователь перемещает таблицу. Но с этим методом возникает проблема. Поскольку я использую fetchTable() в componentDidMount, он не обновляет this.state.tables, когда пользователь создает таблицу. Таким образом, чтобы увидеть только что созданную таблицу, пользователь должен обновить страницы ..

Итак, что я хочу спросить, что 1) Как я могу хранить Redux состояния в локальное состояние (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

Обычно вы хотите создать магазин, например, TablesStore, которое будет содержать начальное состояние и любое последующее состояние после любых внешних операций, т. Е. Происходит сетевой вызов.

Ваш компонент будет подписаться на него. И магазин позволит вашему компоненту знать каждый раз, когда изменяется состояние. И тогда вы можете просто сделать что-то вроде this.setState(TablesStore.getTablesState())

Отправка запросов на выборку с вашего компонента очень обескуражена. Также, если вы ищете полную архитектуру для вашего приложения, я не думаю, что SO - лучшее место для этого, потому что это легко станет достаточно длинным для учебника.