反応還元ボイラプレートを減らす方法 - 私はComponentFactoryを作成しようとしましたが、反応再現エラーが発生しました

Question

react-reduxで必要な定型文を減らすためにcreateScreenというファクトリ関数を作成すると考えました。

それは次のようになります。

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; 

しかし、私はundefined is not an object (evaluating 'context.store')を取得します。 スタックトレース：

Connect(ParentScreen) 
connect.js:129 

_this.store = props.store || context.store;

コードのこの行です。 ここに明白な間違いがありますか？ それ以外の定型コードをすべて減らす方法については、他にはありませんか？

ありがとうございます。

Answer 1

空の接続された1つ（this is the class you're actually extending）を拡張しようとするのではなく、実際のコンポーネントクラスを操作するとすべてが簡単になります。

コンポーネントを予測可能に動作させたい場合は、コンポーネントを直接接続する必要があります。代わりにファクトリから関数を返すようにしてください。

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

これで、インスタンス化は次のようになります。

class Child extends React.Component { 
    // ... 
} 

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

export default ParentScreen(Child); 

すべてのコンポーネント間でいくつかの動作を共有したい場合は、上位コンポーネントを使用する方がよいでしょう。

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

次に、createScreenの機能の中でそれをフックしてください。

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