Mobx - 反応：一緒に注入して観察する

Question

最近、反応とmobx反応ライブラリでmobxを使い始めました。

機能的な反応コンポーネントを使用してビューを作成したいと考えています。

セレクタ関数とComponentを引数とし、inject（パラメータとしてセレクタ関数を使用）を呼び出し、そのコンポーネントを監視して、このコンポーネントをmobx-reactストアに効果的に接続するヘルパー関数を作成したいと思います。 ）、このコンポーネントに必要なプロパティのみを提供します。

しかし、私はそれを働かせることはできません。アクションはディスパッチされていますが、ビューはこの変更に反応しません（ストア属性は変更されますが、コンポーネントはこの変更に反応しません）。

ここ

import { observer, inject } from 'mobx-react'; 

export function connect(selectorFunction, component) { 
    return inject(selectorFunction)(observer(component)); 
} 

は私のコンポーネントです：

import React from 'react'; 
import { connect } from 'utils'; 

const selector = (stores) => { 
    return { 
    counter: stores.counterStore.counter, 
    double: stores.counterStore.double, 
    increment: stores.counterStore.increment 
    }; 
}; 

const Counter = ({ counter, double, increment }) => { 
    return (
    <div className="counter"> 
     <p>{ counter }</p> 
     <p className="double">{ double }</p> 
     <button onClick={increment}>+1</button> 
    </div> 
); 
}; 

export default connect(selector, Counter); 

、ここで私の店です：

は、ここに私のヘルパー関数です

import { observable, computed, action } from 'mobx'; 

export default class Counter { 
    @observable counter = 0; 

    @action 
    increment =() => { 
    this.counter++; 
    } 

    @computed 
    get double() { 
    return this.counter * 2; 
    } 
} 

（示していないプロバイダや他の単純なもの、それ適切に設定されている）。

ありがとうございます！すべての答えは非常に高く評価されています。

Answer 1

Mobxのdocumentationを見ると、セレクタが少し間違っているようです。店舗のオブジェクト、およびの値を持つオブジェクトではないオブジェクトを返す必要があります。代わりに、実際のcounterStoreを戻してください：

const selector = (stores) => { 
    return { 
    counterStore: stores.counterStore 
    }; 
}; 

そして、あなたのコンポーネントでこのようにそれを使用します。答えを

const Counter = ({ counterStore: { counter, double, increment } }) => { 
    return (
    <div className="counter"> 
     <p>{ counter }</p> 
     <p className="double">{ double }</p> 
     <button onClick={increment}>+1</button> 
    </div> 
); 
}; 

Answer 2

export function connect(selectorFunction, mapToProps, component) { 
 
    return inject(selectorFunction)(observer(withProps(mapToProps)(component))); 
 
} 
 

 
export const withProps = (mapToProps: (Object) => Object) => Component => { 
 
    return class extends React.Component { 
 
    render() { 
 
     const mappedProps = mapToProps(this.props) 
 
     return <Component {...mappedProps} {...this.props}/> 
 
    } 
 
    } 
 
} 
 

 
const ConnectedCounter = connect(
 
    (stores) => ({counterStore: stores.counterStore}), 
 
    ({counterStore}) => ({ 
 
    counter: counterStore.counter, 
 
    double: counterStore.double, 
 
    increment: counterStore.increment 
 
    }), 
 
    Counter 
 
)