Я пошел дальше и реорганизовал ваше приложение.У вас много ошибок, которые сдерживают ваше приложение.
Рабочий пример : https://codesandbox.io/s/xj553k7nno
Пожалуйста, внимательно прочитайте следующие примечания :
- Используйте пакет npm
react-redux ( документация ) для подключения и отправки к redux - Отделите
containers от вашего components: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 - При использовании
prop-types, Я бы рекомендовал определять propTypes вне вашего класса (я предпочитаю это из class или function и до или после export).Подробнее см. . - Создать
actions, который манипулирует Redux state, и types, который обрабатывает то, чем state манипулирует. - Общее соглашениедля Redux
actions означает return a type и payload (хотя иногда payload может не потребоваться), а для всех reducers следует ожидать, что type и payload от действия. - Используйте
switch операторы вместо вложенных if и else операторов для reducers. - Когда
import ing, следуйте этому порядку: - 1.) Узловые модули
- 2.) Компоненты / контейнеры / действия / редукторы / вспомогательные функции
- 3.) Таблицы стилей
- Не вкладывать недействительнымиЭлементы HTML:
<p><div/></p> (div не может отображаться как child из p) - Не используйте расплывчатые названия пропеллов:
close, open, ... и т. Д.Вместо этого будьте более декларативными: closeModal, openModal, ... и т. Д. - Не используйте подчеркивания
_, так как это не является общепринятым соглашением об именах JavaScript - Сокращение повторяющегося кодаповторно используемые компоненты (например:
ModalColor)! - В этом примере React
state не требуется для обновления Redux state.Redux может управлять своими state через actions и reducers. - . Использовать
<Fragment></Fragment> или <></>, когда вам нужно инкапсулировать элементы JSX, которые не нуждаются в содержащем элемент HTML. Упростите структуру вашего приложения:
├── build
| ├── css
| | ├── main.[contenthash:8].css
| | └── main.[contenthash:8].css.map
| ├── js
| | ├── main.[hash].js
| | └── main.[hash].js.map
| ├── media
| | └── [hash].[ext]
| └── favicon.ico
| └── index.html
|
├── public
| ├── favicon.ico
| └── index.html
|
├── src
| ├── actions
| ├── components
| ├── containers
| ├── images
| ├── reducers
| ├── routes
| ├── store
| ├── styles (global)
| ├── tests
| ├── types
| ├── utils
| ├── index.js
| ├── serviceWorker.js
| └── setupTests.js
|
├── .gitignore
├── README.md
├── package.lock.json
└── package.json