Государственное управление в реакции на уровне компонентов

Question

Если вы используете Redux для управления глобальным состоянием, как вы управляете эксклюзивным состоянием компонента, которое используется только этим компонентом и его дочерними элементами (действуют как контейнер)?

Редактировать Я уже использую useState () . Я прошу о лучшем подходе, потому что у меня появилось много операторов useState.

Есть идеи?

Answer 1

Я думаю, что контейнер с complicated state, которым вы хотите управлять так же, как pure React, когда еще не появилось состояние управления избыточностью и другими инструментами. В вашем случае Контейнер является корневым Компонентом (как Компонент Приложения в индексе). Он управляет сложным объектом состояния и передает значение ключа или некоторую функцию дочерним элементам.

Class Container extend Component {
   state = {
       // complicated state
   }

   render() {
       return (
          <Children1 key1={this.state.value1...} />
          <Children2 key1={this.state.value2...} />
          <Children3 key1={this.state.value3...} />
       )
   }
}

Или вы можете использовать функциональный компонент для более гибкого управления состоянием:

const Container = () => {
   const [state1, setState1] = useState({ // some key: value here });
   const [state2, setState2] = useState({ // some key: value here });
   const [state3, setState3] = useState({ // some key: value here });
   return (
      <Children1 keyObject={state1} keyValue={state1...} />
      <Children2 keyObject={state2} />
      <Children3 keyObject={state3} />
   )
}

Ответить с помощьюваш Edit : я думаю useState - лучший подход для вашего случая. Когда вы делаете со стороны клиента, вы должны контролировать , где используется переменная . Разделение состояний поможет вам управлять ими более гибко. Если у вас много операторов useState , вам следует подумать о переработанной структуре контейнера и дочернего компонента.