trovit / reffects-store Goto Github PK

Since we use dipatch in most cases when we are using injectedProps, we have think that would be nice to replace injectedProprs with a function with dispatch as a parameter.

This would provide dipsatch function without importing it in the component and would be self-contained in a subscribed component.

This would be an easy to solve breaking change.

Example:

Now:

import { dispatch } from 'reffects-store':
...
subscribe(Component, (state) => { ... }, { onDoSomething: dispatch('EVENT_ID') });

Then:

subscribe(Component, (state) => { ... }, (dispatch) => { onDoSomething: dispatch('EVENT_ID') });

In some edge cases we are using subscribe function only to inject props, yet not for subscribing it to the state. In those cases we aren't passing by mapStateToProps.

Despite we consider it an anti-pattern, because we could simply compose the component in order to achieve that, it will be a improvement to not execute all the subscription flow if no mapStateToProps is passed by in the subscribe function.

Now we are passing by an empty fucntion:

subscribe(Component, () => {}, { myInjectedPropr: 'Hi there' });

This should allow to do this:

subscribe(Component, null, { myInjectedPropr: 'Hi there' }`);

We're currently using microbundle to generate all our distribution files. Now we need more customization over sourcemaps and minification options. We should consider using another library to generate those files: rollup could be a nice candidate. (It's actually the library where microbundle is running on top of)

Microbundle: https://github.com/developit/microbundle
Rollup: https://rollupjs.org/guide/en/

Today we have one way to subscribe our React components suing the method subscribe() and it works good for us now.

This is not an issue to change the way we use subscribe, but it can be interesting to study another option to subscribe the React components taking advantage of React hooks (https://reactjs.org/docs/hooks-intro.html) and see if it fits to us.

It can provide a simpler and cleaner API to subscribe our components to the state. Example:

• Current subscribe high order component:

function Component({ prop }) {
  return <span>{value}</span>
}

export default subscribe(Component, function(state) {
    return { prop: state.prop };
})

• With useSubscribe hook:

export default function Component() {
  const prop = useSubscribe(state => state.prop /* or propSelector(state) */);
  return <span>{prop}</span>
}

* useSubscribe name is provisional just for the example

Resources:

• https://react-redux.js.org/next/api/hooks#useselector-examples
• https://github.com/react-spring/zustand