45

私はreduxを使用していますが、コンポーネントを整理する方法がわかりません.メインコンポーネントの名前をフォルダーの名前としてフォルダーに保存し、内部のすべてのコンポーネントをフォルダーに保存するのが最善だと思います:

コンポーネント
  Common/ リンク、ヘッダー タイトルなど
  フォーム/ボタン、入力など
  プレーヤー/プレーヤーを形成するすべての小さなコンポーネント
    index.js これは一番上のレイアウト コンポーネントです
    playBtn.js
    アーティスト名.js
    songName.js
  エピソード/別のコンポーネント

次に、コンテナー フォルダーには、ページごとに 1 つのコンテナーがあり、実際に Redux に接続しているのはそのコンテナーだけです。

コンテナ/
  HomePageApp.js
  EpisodePageApp.js
  ...

次に、アクションはページごとに 1 つではなく、トップ コンポーネントごとに 1 つです。そのため、Redux に接続するページ コンテナーでは、そのページで使用されるコンポーネントのすべてのアクションを渡します。例えば：

行動/
  Player.js
  Episode.js
  ...

私はこれを正しく行っていますか？グーグルに関する情報はあまり見つかりませんでした。見つけたものは、小さなプロジェクトに限定されていると思います。

ありがとう！

4

6 に答える 6

99

公式の例では、いくつかの最上位ディレクトリがあります。

これは、小規模および中規模のサイズのアプリに適しています。

よりモジュラー化し、関連する機能をまとめてグループ化したい場合は、ドメインごとに機能をグループ化するDucksやその他の方法が、Redux モジュールを構築する優れた代替方法です。

最終的には、最適な構造を選択してください。Redux の作成者が、何があなたにとって便利かをあなたよりもよく知ることはできません。

于 2015-10-03T10:36:40.003 に答える
15

これは、ベスト プラクティスやコード スタイルに関する質問であり、明確な答えはありません。しかし、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
于 2015-09-17T15:44:03.340 に答える
4

スマート コンポーネントとダム コンポーネントを同じファイルに保持することを好みますが、スマート コンポーネントにはデフォルトのエクスポートを使用し、プレゼンテーション/ダム コンポーネントにはエクスポートを使用します。このようにして、ディレクトリ構造内のファイル ノイズを減らすことができます。また、コンポーネントを「ビュー」ごとにグループ化します (管理 => [admin.js、adminFoo.js、adminBar.js]、在庫 => [inventory.js、inventoryFoo.js、inventoryBar.js] など)。

于 2016-03-26T14:19:01.190 に答える
2

コンポーネントディレクトリについて強い意見はありませんが、アクション、定数、レデューサーをまとめるのが好きです:

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

私stateは webpack でエイリアスを作成するので、コンテナー コンポーネントでimport {someActionCreator} from 'state/actions';.

このようにして、アプリ内のすべてのステートフル コードが 1 つの場所に存在します。

次のようなディレクトリreducers.jsを作成するだけで複数のファイルに分割でき、インポートステートメントを変更する必要がないことに注意してください。reducers/actions/

于 2015-09-20T18:10:36.420 に答える
0

Redux では、アクション (actions/ フォルダー) のエントリ ポイントとレデューサー (reducers/ フォルダー) のエントリ ポイントが 1 つあります。

ドメインベースのコード構造を使用すると、ドメイン/機能の実装とメンテナンスが簡素化されます... 一方、コンポーネントの依存関係とアプリの状態/ロジックのメンテナンスが複雑になります。

再利用可能なコンポーネントをどこに配置しますか? 機能/ドメインフォルダー内？他の機能/ドメインからの再利用可能なコンポーネントが必要な場合は、ドメイン間の依存関係を作成する必要がありますか? うーん、大規模なアプリにはあまり適していません!

レデューサーを結合する必要がある場合、domain-code-structure は以前に提供したものを取り除きます。

ドメイン/機能ごとに単一の redux モジュールのみを作成しています。domain-code-structure は、一部/ほとんどの場合に適切なはずですが、これは Redux ではありません。

于 2016-07-08T08:45:22.563 に答える