Что, если приложение ReactJS структурировано так, что App State является контейнером App, а App и все компоненты являются потребителями контекста?

Question

Интересно, если приложение ReactJS структурировано таким образом, оно будет работать правильно:

1. Все состояние приложения находится в контексте приложения, а App находится под AppContainer.
2. Приложение и все компоненты могут быть потребителями контекста.
3. Каждому компоненту назначен установщик «данных, вызывающих озабоченность».
   • внутри компонента, каждое состояние является локальным и не зависит от компонента, за исключением случаев, когда конечное значение получается при взаимодействии пользователя с компонентом, оно устанавливается обработчиком из контекста для «установки данных, вызывающих озабоченность» «.
   • например, каждый компонент Counter работает независимо и может быть реализован любым методом, но все заботы родителя и приложения, когда значение готово, устанавливают его в« данные, вызывающие озабоченность »в контекст
4. Таким образом, приложение или любой компонент при необходимости имеет доступ ко всем данным приложения.
5. Компонент может задавать данные с помощью этих «глобальных установщиков данных». ", но так как они передаются реквизитами, если есть какая-либо ошибка, мы можем найти, какие компоненты могут быть теми, которые устанавливают данные случайно, просто путем grep'ing для этого имени обратного вызова setData ().
6. Он отражает путь HTML: у нас есть разные элементы, такие как поле ввода, указатель даты <input type="date">, указатель цвета <input type="color"> и т. Д. c, и нам важно только какое окончательное значение оно предоставляет, и на самом деле все равно, как оно реализовано внутри.

Пример включен: https://codesandbox.io/s/festive-platform-kjx5u

Там 3 счетчика, они являются независимыми компонентами и сохраняют счетчик для лапши, напитков и закусок и устанавливают счетчик в свойство в контексте, когда пользователь взаимодействует со счетчиком.

AppContext:

const AppContext = React.createContext({});

export class AppContainer extends React.Component {

  state = {
    noodleCount: 0,
    drinkCount: 0,
    snackCount: 0
  };

  render() {
    return (
      <AppContext.Provider value={{
        ...this.state,
        setNoodleCount: count => this.setState({ noodleCount: count }),
        setDrinkCount: count => this.setState({ drinkCount: count }),
        setSnackCount: count => this.setState({ snackCount: count })
      }}>

        <App />

      </AppContext.Provider>
    );
  }
}

export default AppContext;

и 3 счетчика легко создать:

      <div>Noodle: <Counter setDataOfConcern={value.setNoodleCount} /></div>
      <div>Drink: <Counter setDataOfConcern={value.setDrinkCount} /></div>
      <div>Snack: <Counter setDataOfConcern={value.setSnackCount} /></div>