3 ms·
I'm a big fan of decorators, but it seems like much of the React/Redux world is overly class-decorator happy. It's really common to define properties in a decor
by spankalee 9y ago
I'm a big fan of decorators, but it seems like much of the React/Redux world is overly class-decorator happy. It's really common to define properties in a decorator which would be much easier to read, IMO, as static or instance properties. I'd rather read something more like this:
@kea // kicks off the meta-programming to read the statics below
export default class Counter extends Component {
static actions = {
increment: (amount) => ({ amount }),
decrement: (amount) => ({ amount }),
};
static reducers = {
counter: [0, PropTypes.number, {
[this.actions.increment]: (state, payload) => state + payload.amount,
[this.actions.decrement]: (state, payload) => state - payload.amount
}],
};
static selectors = ({ selectors }) => ({
doubleCounter: [
() => [selectors.counter],
(counter) => counter * 2,
PropTypes.number,
],
});
render () {
const { counter, doubleCounter } = this.props
const { increment, decrement } = this.constructor.actions
return (
<div className='kea-counter'>
Count: {counter}<br />
Doublecount: {doubleCounter}<br />
<button onClick={() => increment(1)}>Increment</button>
<button onClick={() => decrement(1)}>Decrement</button>
</div>
)
}
}
- acemarke 9y agoIt's worth noting that both the React and Redux teams generally discourage the use of decorators. Quoting the Create-React-App README: > Create React App doesn’t support decorator syntax at the moment because: > - It is an experimental proposal and is subject to change. > - The current specification version is not officially supported by Babel. > - If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook. > Create React App will add decorator support when the specification advances to a stable stage. In addition, use of the React-Redux `connect` method as a decorator can lead to unexpected behavior, such as `defaultProps` applying to the generated wrapper component instead of the underlying "plain" component. I'm not sure how the `kea` decorator handles that sort of thing.
- mariusandra 9y agoHey, thanks for the feedback! This is definitely something to think about, as nothing in the syntax of kea is set in stone. That said, the magic with having a big options hash in the `@kea({})` call itself is that then you can easily disconnect the logic from your components as your application grows. Here's more information about this: https://kea.js.org/guide/connected https://kea.js.org/guide/connected Also, I'm not sure you can do `this.actions` inside a static variable, but I understand the point that you were trying to make.
- spankalee 9y ago> That said, the magic with having a big options hash in the `@kea({})` call itself is that then you can easily disconnect the logic from your components as your application grows. Here's more information about this: https://kea.js.org/guide/connected https://kea.js.org/guide/connected Interesting. I still think these are better modeled (and read) as part of the class declaration. You can do the same thing with mixins: Transforming that example: import FeaturesLogic from '../features-logic.js'; @kea class CounterExampleScene extends FeaturesLogic(Component) { // no change here } Where FeaturesLogic is a JS class mixin: http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/ http://justinfagnani.com/2015/12/21/real-mixins-with-javascr... export const FeaturesLogic = (base) => class extends base { static actions = ...; } > Also, I'm not sure you can do `this.actions` inside a static variable, but I understand the point that you were trying to make. Not in the current Babel transform, but I thought it may be in the latest unified class fields proposal. I'm digging for it...
- deleted 9y ago[deleted]