3 ms·
nice flowchart, i know the point of redux but man the boilerplate needed to create a component sucks: class _MyActualComponent extends React.Component<reduxS
by novaleaf 11y ago
nice flowchart, i know the point of redux but man the boilerplate needed to create a component sucks:
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;
ps: yes, about 3 lines of that is because I use Typescript.
- deleted 11y ago[deleted]
- olalonde 11y agoWhat language is this? I'm using es6 and most of my components just look like this: export default ({ name }) => ( <div>hello {name}</div> ) With Redux connect: const SomeComponent = ({ name }) => ( <div>hello {name}</div> ) export default connect(s => ({ name: s.user.name }))(SomeComponent)
- novaleaf 11y agoThe code I wrote is Typescript (ES6 with typings), I am using the ES6 class style React Components. you are using the lambda style components which is fine for simple stuff but for heavier stuff the class-style components are needed. also you are not passing the reducer actions, etc. Still, what you are showing in your simple example looks pretty similar to the amount of boilerplate I'm seeing with Redux, so it looks like there's not really an easier way.