Redux + React + Typescript：我如何減少所需的腳手架數量？

Question

我想知道是否有一種方法可以避免需要檢測我的Redux-Aware組件。這似乎需要過度的腳手架。

例如，以下是聲明一個終極版知曉組件所需的最低代碼：

class _MyActualComponent extends React.Component<reduxScafolding.Action & { myReduxState: reduxScafolding.ReduxState; pushPath: ReduxSimpleRouter.pushPath; } & { myActualProp: string; }, {}>{ 
//my component's implementation goes here. 
} 

/** type for casting (so consumers know the props they are required to pass */ 
class IMyComponentVisibleType extends React.Component<{ myActualProp: string; }, {}> { }; 

/** instrument my component with redux */ 
export var MyComponent = ReactRedux.connect(
(reduxStoreState) => { //subscripbe to reduxStore updates (Called every change). 
    return { myReduxState: reduxStoreState.myReduxState }; //map myReduxState to props 
} 
, _.merge({}, {}, { pushPath: ReduxSimpleRouter.pushPath }, reduxScafolding.action) as any //redux-binds, then includes the pushPath() method for use in our _App Component 
)(_MyActualComponent) as any as typeof IMyComponentVisibleType; 

Answer 1

這似乎是腳手架的含量過高，需要

關鍵的事情， 需要重複出現：

• 某種方式來說什麼改變一個特定的行動帶給商店（+代碼來調度這樣的行動<這可以結合變化的定義...見下文）。
• 某種方式來說明組件需要的商店數據。

沒有殺死這些（基本）的概念，所以你將至少有1行這兩件事情。其餘的可以抽象出來，這就是我在http://alm.tools/中使用的redux。

文檔：https://github.com/alm-tools/alm/blob/master/docs/contributing/REDUX.md

例子：

新動作

export let addTabs = redux.add('addTabs', (state:StoreState, tabs: TabInstance[]): StoreState => { 
    tabs = state.tabs.concat(tabs); 
    return { 
     tabs 
    }; 
}); 

連接到存儲

@connect((state: StoreState): Props => { 
    return { 
     errorsExpanded: state.errorsExpanded, 
    }; 
}) 

Answer 2

我不使用，因爲這是涉及的開銷的終極版。您可以輕鬆處理React中的所有CRUD操作，並節省開銷和麻煩。看看這個...

http://bssdev.biz/HowTo/How-to-implement-full-CRUD-forms-with-React-and-asp.net-core