Mobx - 反应：一起注入和观察

最近我开始使用mobx的反应和mobx反应库。Mobx - 反应：一起注入和观察

我想使用功能React组件来创建我的视图。

我想创建一个辅助函数，它需要选择器函数和Component，调用inject（使用选择器函数作为参数）并观察该组件 - 有效地将此组件连接到mobx-react store ）并仅为该组件提供所需的属性。

但我无法让它工作。操作正在分派，但视图不会对此更改作出反应（商店属性确实会更改，但组件不会对此更改作出反应）。

这是我的助手功能：

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; 
    } 
}

（未显示供应商和其他简单的东西，但它设置正确）。

谢谢！每一个答案都非常感谢。

来源

2016-08-24 Matúš Čongrády

看着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> 
); 
};

来源

2016-08-24 20:36:55 tobiasandersen

感谢您的回答！这可能解决了一些其他问题，我甚至不知道，但我的前一个问题仍然存在:) –

嗯，这很奇怪。我用你的代码（本地在我的电脑上）注意到你描述的问题。更新到此之后，它适合我。希望你找到解决方案！ – tobiasandersen

当前行为背后的原因是，只有'observer'组件的'render'方法被跟踪，而不是注入函数本身。这可能实际上是有趣的...为了好玩，你可以尝试这是否解决了你原来的问题： 'return observer（inject（selectorFunction）（observer（component）））' 另请参阅：https：// github。 COM/mobxjs/mobx-反应/问题/ 111 – mweststrate

-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 
 
)

来源

2016-08-29 21:20:37 olegsmetanin

Mobx - 反应：一起注入和观察

回答

相关问题