Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@connect decorator #68

Open
pkieltyka opened this issue Apr 5, 2018 · 6 comments
Open

@connect decorator #68

pkieltyka opened this issue Apr 5, 2018 · 6 comments

Comments

@pkieltyka
Copy link

pkieltyka commented Apr 5, 2018

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
Copy link

tijhaart commented Jun 21, 2018

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
Copy link

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

@insuusvenerati
Copy link

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
Copy link
Owner

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants