Wie reduzieren reagieren-redux vorformulierten - ich versuche, eine Component zu schaffen, aber ich bin immer reagieren-redux Fehler

Question

Ich dachte an eine Fabrik-Funktion zu schaffen createScreen zur Reduzierung des vorformulierten von react-redux erforderlich genannt.

Es sieht wie folgt aus:

ParentScreenFactory.js

export default function createScreen(stateActions = []) { 
    class ParentScreen extends React.Component { 

    } 

    function mapStateToProps(state) { 
    return { 
     ...state, 
    }; 
    } 

    function mapDispatchToProps(dispatch) { 
    const creators = Map() 
      .merge(...stateActions) 
      .filter(value => typeof value === 'function') 
      .toObject(); 

    return { 
     actions: bindActionCreators(creators, dispatch), 
     dispatch, 
    }; 
    } 

    return connect(mapStateToProps, mapDispatchToProps)(ParentScreen); 
} 

Child.js

const ParentScreen = createScreen([ 
    routingActions, 
    authActions, 
]); 

class Child extends ParentScreen { 

    constructor(props) { // <-- error on this line 
    super(props); 
    } 

    render() { 
    return (
     <View/> 
    ); 
    } 
} 
export default Child; 

aus irgendeinem Grund aber ich undefined is not an object (evaluating 'context.store') bekommen. Stacktrace:

Connect(ParentScreen) 
connect.js:129 

, die diese Codezeile ist _this.store = props.store || context.store;. Irgendwelche offensichtlichen Fehler, die Sie hier sehen? Anders als das Haben Sie eine bessere Vorstellung davon, wie all diese vorformulierten Code zu reduzieren?

Vielen Dank.

Answer 1

Alles wird einfacher, wenn Sie mit der eigentlichen Komponentenklasse arbeiten, anstatt zu versuchen, den leeren verbunden, um eine (this is the class you're actually extending) zu verlängern.

Wenn Sie Ihre Komponente wollen vorhersagbar arbeiten, dann müssen Sie Ihre Komponente direkt verbinden. Versuchen Sie stattdessen, eine Funktion von Ihrer Fabrik zurückzugeben.

export default function createScreen(stateActions = []) { 
    return (Component) => { 
    // ... 
    return connect(mapStateToProps, mapDispatchToProps)(Component); 
    }; 
} 

Dann beginnt Ihre Instanziierung in etwa so auszusehen.

Wenn Sie etwas Verhalten zwischen allen Komponenten teilen möchten, dann verwenden Sie besser eine Komponente höherer Ordnung.

function withCommonBehaviour(Component) { 
    return (props) => { 
    let newProps = doSomething(props); 
    return <Component {...newProps} />; 
    }; 
} 

Dann nur, dass Haken in Ihrer createScreen Funktion.

// ... 
let CommonComponent = withCommonBehaviour(Component); 
return connect(mapStateToProps, mapDispatchToProps)(CommonComponent);