2017-09-15 3 views
0

Also mache ich ein Projekt, wo ich im Grunde meine eigene Version von Redux geschrieben habe und ich versuche, einige sehr komplexe Typisierung zu tun, und ich bin nicht sicher, ob Flow die Fähigkeit hat, damit umzugehen. Vielleicht mache ich etwas falsch, aber wenn ich das zur Arbeit bringen könnte, wäre es super elegant.Wie man eine Redux-ähnliche connect() Funktion im Fluss eintippt

Hier ist meine connect Funktion

// @flow 
// TODO: think about how to make this more efficient, since forceUpdate on every subscribe will get inefficient 

import React, { PureComponent } from 'react'; 

import type { Store } from './getStore'; 

function connectToStore<StateType, MappedProps: Object, PassedProps: Object>(
    store: Store<StateType>, 
    mapStateToProps: (StateType) => MappedProps, 
    OldComponent: (PassedProps & MappedProps) => React$Element<*> 
) { 
    return class Connected extends PureComponent<PassedProps, { storeState: StateType }> { 
    unsubscribe:() => void; 

    constructor(props: PassedProps, context: any) { 
     super(props, context); 
     this.state = { 
     storeState: store.getState() 
     }; 
     this.unsubscribe = store.subscribe((state) => this.setState({ storeState: state })); 
    } 

    componentWillUnmount() { 
     this.unsubscribe(); 
    } 

    render() { 
     const mappedProps = mapStateToProps(this.state.storeState); 
     return React.createElement(OldComponent, { ...this.props, ...mappedProps }); 
    } 
    }; 
} 

export default connectToStore; 

Also, was passieren soll, ist, dass die Eingabe dieser Komponente sollte es so machen, dass, wenn ich diese Funktion auf die Komponente C aufrufen, dann wird es die Requisiten von C und Check bewerten um sicherzustellen, dass die Requisiten, die in die Komponente in Kombination mit den Requisiten von mapStateToProps gelangt sind, jede Requisitenanforderung von C erfüllen. Was jedoch geschieht, ist im Grunde genommen überhaupt keine Typüberprüfung. Ich muss keine der Prop-Anforderungen von C erfüllen (weder in der mapToProps-Funktion noch in den Requisiten, die vom unmittelbaren Elternelement übergeben werden), und flow akzeptiert es auch unabhängig davon. Ist das jenseits der Möglichkeiten des Flusses? Oder fehlt mir etwas?

Antwort

-1

So ziemlich wollen Sie nur ein gutes Framework wie Angular

verwenden
Verwandte Themen