Reduxのアクションタイプと状態を整理する

Question

大きなアプリを持っているときのアクションタイプと状態を整理するベストプラクティスは何ですか？ 1つの問題は、同じ名前のアクションと同様の状態なので、同じ名前を使用したいということです。ディスカッションのためだけに、2つのタイトルを更新する場合、アクションタイプにはFIRST_TITLEとSECCOND_TITLE、状態にはfirstTitleとseccondTitleのような名前規約を使用する必要がありますか？あなたがより良い解決策を持っているなら、私に知らせてください。

Answer 1

大規模なアプリケーションでは、自分のコードをモジュールごとに整理しています。各モジュールは独自のレデューサーやアクションなどを持っています。各モジュールはアクションタイプとアクションクリエイターをエクスポートし、それらをexlusivelyで使用します。これにより、モジュール間の名前の競合が防止されます。実際、アクション名を短くしています。

モジュール/商品/ actionTypes.js：

export const name = "items"; 

export const UPDATE_TITLE = `${name}/UPDATE_TITLE`; 

モジュール/商品/

import * as actionTypes from "./actionTypes"; 

export const updateTitle = (title) => ({ 
    type: actionTypes.UPDATE_TITLE, 
    payLoad: title, 
}); 

モジュール/商品/ reducer.js

import * as actionTypes from "./actionTypes"; 

const initialState = { title: "" }; 

const reducer = (state = initialState, action) { 
    switch(action.type) { 
    case actionTypes.UPDATE_TITLE: { 
     return { 
     ...state, 
     title: action.payload, 
     }; 
    } 
    } 
} 

export default reducer; 

モジュール/コメントをactions.js /actionTypes.js

export const name = "comments"; 

export const UPDATE_TITLE = `${name}/UPDATE_TITLE`; 

の

モジュール/コメント/

import * as actionTypes from "./actionTypes"; 

export const updateTitle = (title) => ({ 
    type: actionTypes.UPDATE_TITLE, 
    payLoad: title, 
}); 

モジュール/コメント/ reducer.jsに

import * as actionTypes from "./actionTypes"; 
import * as itemActionTypes from "../items/actionTypes"; 

const initialState = { title: "" }; 

const reducer = (state = initialState, action) { 
    switch(action.type) { 
    case actionTypes.UPDATE_TITLE: { 
     return { 
     ...state, 
     title: action.payload, 
     }; 
    } 
    case itemActionTypes.UPDATE_TITLE: { 
     // Do something with the updated item title 
    } 
    } 
} 

export default reducer; 

rootReducer.js

import { combineReducers } from "redux"; 
import { default as itemsReducer } from "modules/items/reducer"; 
import { default as commentsReducer } from "modules/comments/reducer"; 

export default combineReducers({ 
    items: itemsReducer, 
    comments: commentsReducer, 
}); 

をactions.js EDIT：追加レデューサーコメント

に答えるために

Answer 2

のようなものを使用できます。ファイルシステムからアクションとレデューサーを生成します。

私たちは大きなプロジェクトのためにそれを製品に使用しており、その複雑さを本当に助けてくれました。各変換には独自のファイルがあり、これは生成されたアクション名+非同期コードが同じファイルと同じ場所に配置されるようになります。

夏：

それはさらに一歩減速組成物の考え方をとります。あなたのレデューサーを表すファイルを持ち、個々のアクション機能を作成する代わりに、

Reduxの、自動のアプローチは、とにかくあなたのアプリであなたが書くことができますから、今

例

└── store/ 
    ├──user/ 
    │ └── index.js 
    │ └── changeName.js 
    └──posts/ 
     └── index.js 
     └── delete.js 

をオン状態の各アクション/変換を表現し、動的な機能としてこれを露光し、個々のJSファイルとフォルダを持っています

import actions from 'redux-auto' 
... 
actions.user.changeName({name:"bob"}) 

店/ユーザー/ changeName.js

export default function (user, payload) { 
    return Object.assign({},user,{ name : payload.name }); 
} 

それがあります！

サードパーティのリデューサでreduxアクションをリスンする場合は、あなたは機能に対して緩やかな品質チェックとして使うことができます。より高度なものについては

action.type == actions.user.changeName // "USER/CHANGENAME" 

あなたも、このことができます:)