Как поместить в state компонента данные из reducer

220

17 июня 2022, 00:30

Я получаю данные из JSON-файла в файле actions.js и устанавливаю их в reducer sections:

dispatch(fetchSectionsSuccess({ sections: sections }));

Также у меня есть компонент Sections.js, и я бы хотел помимо хранения массива sections в reducer хранить их в state компонента Sections, чтобы в дальнейшем я мог менять всего лишь state компонента вместо отправки action, который будет изменять данные в reducer sections.

Я пытаюсь сделать это следующим образом в файле Sections.js:

const mapStateToProps = (state) => {
    const props = {
      sections: state.sections,
    }
    return props;
  };
class Sections extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sections: this.props.sections
        }
    }
render () {
        const { sections, products } = this.props;
        console.log('Sections from props ', this.props.sections);
        console.log('Sections from state ', this.state);
}

Но в итоге понимаю, что данные не попадают в state:

Вопросов несколько:

Это вообще считается нормальным хранить какие-то данные в state компонента, когда есть reducer? Или мне все-таки лучше хранить все в reducers.js?
Если я все-таки хочу хранить эти данные в state компонента, как мне это сделать?

Answer 1

В некоторых случаях нормально, например если вы меняете состояние в компоненте и у вас есть кнопки сохранить и отмена
В вашем случае, скорее всего, конструктор отрабатывает раньше чем обновляются данные. добавьте метод
```
 componentDidUpdate(prevProps){
   if(this.props.sections!==prevProps.sections){
     this.setState({sections: this.props.sections});
   }
 }
```