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

WIP - Complex Typings #90

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

WIP - Complex Typings #90

wants to merge 3 commits into from

Conversation

timpur
Copy link

@timpur timpur commented May 28, 2018

Sorry Work in Progress, want to get this here early to get ideas / help ...
My initial changes to bring more complex typings like react-redux.

This is my current issue (microsoft/TypeScript#5453) with Action type and map actions to props.

@developit
Copy link
Owner

FWIW I see the value in this PR. Do you think it's possible to make this approach work? Right now manually specifying props outside VS inside connect() is cumbersome.

@timpur
Copy link
Author

timpur commented Sep 21, 2018

@developit , ive been using it and its been really handy !!

I think i just need a expert at complex typings or i do allot more learning my self :P.

Over the last month ive learn allot more TS stuff and i might redo this PR and hopefully out of that, i get a more polished solution.

@chrstntdd
Copy link

It looks like you're way ahead of the use case I'm looking to support right now. I'm trying to fully type all actions in unistore and I'm stuck at how to type the factory function for actions and get that same type information in the component using a single Actions type.

It looks like your Action and BoundAction types are somewhat related to this use case, no?

// home.tsx
import React from 'react';
import { connect } from 'unistore'

import { actions, Actions } from '@/state'

type Props = {} & Actions // <---
type State = {}

class Home extends React.Component<Props, State> {
  componentDidMount() {
    this.props.fetchResource({ key: 'value' }); // <--  TS complains since I'm "missing" the first arg
  }
  render() {
    return <div>Home</div>;
  }
}

export default connect('', actions)(Home);
// @/state.ts
import createStore, { Store } from 'unistore';
import otherActions, { OtherActionType } from '../../';

type RootState = {
  readonly email: string;
  readonly username: string;
};

const initialState: RootState = {
  email: '',
  username: ''
};

type GlobalStore = Store<RootState>;

type Actions = OtherActionType & { signUp: (state: RootState,  { key: string }) => void }


export const actions = (store: GlobalStore): Actions => ({
  async fetchResource(_, { key }) => {
    // ...
  },
  ...otherActions(store)
})

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

Successfully merging this pull request may close these issues.

None yet

3 participants