it-swarm.com.ru

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

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

компоненты
 Общие/такие как ссылки, заголовки и т.д. Форма/кнопки, входы и т.д. Player/все мелкие компоненты, формирующие игрока 
 index.js - это самый верхний компонент макета 
 playBtn.js 
 artistName.js 
 songName.js 
 Эпизод/другой компонент 

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

 Контейнеры /
 HomePageApp.js 
 EpisodePageApp.js 
 ...

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

 Действия /
 Player.js 
 Episode.js 
 ...

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

Спасибо!

43
Franco Risso

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

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

Это хорошо работает для небольших и средних приложений.

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

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

94
Dan Abramov

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

./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
15
Kloar

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

4
dakt

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

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

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

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

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

1
w00t

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

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

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

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

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

0
luk_z