@connect decorator

[pkieltyka]

It'd be great to see how react+redux+typescript can use the @connect(..) decorator syntax to connect state/actions to a component's props.

[tijhaart]

Maybe react-redux-typescript-connect-decorator-demo can be of help. Note: I didn't test it myself (yet).

Original source/discussion: DefinitelyTyped/DefinitelyTyped#9951

[IssueHuntBot]

@BoostIO funded this issue with $30. Visit this issue on Issuehunt

[insuusvenerati]

This article I read on dev.to has a section describing how they used a connect decorator to access redux actions and state using props. https://dev.to/aalises/preact--typescript--parcel--redux-zero-rebuilding-the-qmenta-front-end-focusing-on-performance-and-minimalism-1lnp

Was a great read and there is a link to a starter project implementing the decorator they created.
https://github.com/aalises/preact-typescript-parcel-starter

Note: They are using Preact + Redux-zero.

Question: I'm new to contributing, new to typescript as well as redux but have already planned a project to help learn all three. Would I be able to help with this issue? Is this a request to add something to the docs?

[piotrwitek]

Hey @insuusvenerati,
Thanks for sharing the info 👍
Which decorator exactly are you talking about, this one? connectStore
I don't see any example there with mapping props only the actions.

Could you please point me to the example with mapping props?

[insuusvenerati]

import { h, Component } from "preact";
import { Connect } from "redux-zero/preact";

export default function(actions = {}): any {
  return Child => props => (
    <Connect mapToProps={state => ({ ...state })} actions={actions}>
      {mappedProps => <Child {...mappedProps} {...props} />}
    </Connect>
  )
}

This is what I was referring to.
The excerpt from the article.

With this decorator, we can plug it in on top of any component specifying the actions the component will get as props. e.g by putting @connectStore({removeSession, setCurrentPages}); right on top of the declaration of the component, you have access to these actions inside the component which update the global state on the store, while also having access to the global state itself via props ( this.props.removeSession(); ).

It may be my lack of understanding that's making it confusing though. What I wanted to do was get familiar with this subject and them maybe chime in via this issue and send a PR.

[IssueHuntBot]

@issuehuntfest has funded $10.00 to this issue. See it on IssueHunt