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