Как структурировать компоненты/контейнеры Redux

Im, использующий redux, и Im не уверен, как организовать мои компоненты, я считаю, что лучше всего держать их в папках с именем основного компонента как имя папки и всех внутренних компонентов внутри:

components
  Common/   things like links, header titles, etc
  Form/     buttons, inputs, etc
  Player/   all small components forming the player
    index.js  this one is the top layout component
    playBtn.js
    artistName.js
    songName.js
  Episode/  another component

Затем в папке контейнеров Ive один контейнер на страницу, которые являются единственными, с которыми я действительно подключаюсь к Redux:

containers/
  HomePageApp.js
  EpisodePageApp.js
  ...

а затем действия по одному на каждый верхний компонент вместо одного на страницу, поэтому в контейнере страницы, который я подключаю к Redux, передаю все действия компонентов, используемых на этой странице. Например:

actions/
  Player.js
  Episode.js
  ...

Я делаю это правильно? Я не нашел много информации об этом googling, и те, которые я нашел, я думаю, что они ограничены небольшими проектами.

Спасибо!

Ответ 1

В официальных примерах у нас есть несколько каталогов верхнего уровня:

components для "dumb" Реагировать на компоненты, не знающие Redux;
containers для "умных" компонентов React, связанных с Redux;
actions для всех создателей действий, где имя файла соответствует части приложения;
reducers для всех редукторов, где имя файла соответствует ключу состояния;
store для инициализации магазина.

Это хорошо работает для приложений малого и среднего уровня.

Если вы хотите объединить более модульные и связанные с группой функции, Ducks или другие способы группировки домен является хорошим альтернативным способом структурирования ваших модулей Redux.

В конечном итоге выберите любую структуру, которая лучше всего подходит для вас. Нет никакого способа, чтобы авторы Redux могли знать, что удобно для вас лучше, чем вы.

Ответ 2

Это больше вопрос о лучших методах/стиле кода, и нет четкого ответа. Однако в проекте React redux template был предложен очень аккуратный стиль. Это очень похоже на то, что у вас есть.

./react-redux-universal-hot-example
├── bin
├── src
│   ├── components // eg. import { InfoBar } from '../components'
│   │   ├── CounterButton
│   │   ├── GithubButton
│   │   ├── InfoBar
│   │   ├── MiniInfoBar
│   │   ├── SurveyForm
│   │   ├── WidgetForm
│   │   └── __tests__
│   ├── containers // more descriptive, used in official docs/examples...
│   │   ├── About
│   │   ├── App
│   │   ├── Home
│   │   ├── Login
│   │   ├── LoginSuccess
│   │   ├── NotFound
│   │   ├── RequireLogin
│   │   ├── Survey
│   │   ├── Widgets
│   │   └── __tests__
│   │       └── routes.js // routes defined in root
│   ├── redux
│   │   ├── init.js
│   │   ├── middleware
│   │   │   └── clientMiddleware.js  // etc
│   │   └── modules // (action/creator/reducer/selector bundles)
│   │       ├── auth.js
│   │       ├── counter.js
│   │       ├── reducer.js  
│   │       ├── info.js
│   │       └── widgets.js
│   ├── server
│   │   ├── middleware
│   │   └── actions // proxy to separate REST api...
│   └── utils
│   │   ├── validationUtility.js // utility only (component-level definitions inside respective dir)
│       └── createDevToolsWindow.js  // etc
├── static
│   ├── dist
│   └── images
└── webpack

Ответ 3

Я предпочитаю хранить интеллектуальные и немые компоненты в одном файле, но использовать экспорт по умолчанию для интеллектуального компонента и экспортировать для презентационных/немых компонентов. Таким образом, вы можете уменьшить шум файла в своей структуре каталогов. Также группируйте свои компоненты с помощью "Просмотр", т.е. (Администрирование = > [admin.js, adminFoo.js, adminBar.js], Inventory = > [inventory.js, inventoryFoo.js, inventoryBar.js] и т.д.).

Ответ 4

У меня нет сильного мнения о каталогах компонентов, но мне нравятся совлокальные действия, константы и редукторы:

state/
  actions/
    index.js
    ...
  constants.js
  reducers.js

Я с псевдонимом state с webpack, поэтому в компонентах контейнера я могу import {someActionCreator} from 'state/actions';.

Таким образом, весь код состояния в приложении находится в одном месте.

Обратите внимание, что reducers.js можно разбить на несколько файлов, просто создав каталог reducers/, например actions/, и вам не придется изменять какие-либо операторы импорта.

Ответ 5

В Redux у вас есть одна точка входа для ваших действий (действия/папка) и точка входа для редукторов (редукторы/папка).

Если вы используете структуру кода на основе доменов, вы упрощаете реализацию и обслуживание домена/функций... с другой стороны, вы усложняете зависимость компонентов и состояние приложения/логики.

Где вы собираетесь использовать повторно используемые компоненты? внутри папки с функцией/доменом? поэтому, если вам нужен многоразовый компонент из другой функции/домена, вам нужно создать зависимость между доменами? mmh не очень хорошо для большого приложения!

Когда вам нужно комбинировать редукторы, структура кода домена убирает то, что она вам дала ранее.

Вы создаете только отдельные модули редукции для каждого домена/функции. структура домена-кода должна быть хорошей в некоторых/большинстве случаев, но это не Редукс.

Ответ 6

У меня есть шаблон с реагирующей, редукционной структурой папок, и он используется во многих проектах компании. Вы можете проверить это здесь: https://github.com/nlt2390/le-react-redux-duck