mobx

redux 和 mobx 调研结果- mobx

由 帅比萌擦擦* 提交于 2020-03-19 12:44:18
3 月，跳不动了？>>> 调研方向 设计思想/基本用法/生态环境/性能优化 总结 设计思想 mobx 的设计思想我总结之后，主要有以下两点： 函数响应式编程； 任何源自应用状态的东西都应该自动地获得； mobx 不同于 redux 的单一数据源的统一管理，它可以有多个 store， 为了便于维护 ，每一个 store 都是一个类，这样便于维护和扩展； 同时，为了使数据可以自动更新，使用了响应式编程（异步数据流)， 它使用了观察者模式和 装饰器模式 ，将 state 包裹成observable； 当state 有改变时(自己改变或是 action 触发)， 就会相应的去更新由这个state 推导出来的 computed value 以及 reaction；(数据的更新主要由装饰器模式中的对类的修改 )； 它的工作流大致是这样子： 基本用法 mobx 与redux 一样也是单向数据流，核心概念是 state，computed value，reaction，action 等。它们的大概功能为: state: 包裹为 observable 的 的数据； computed values: 从当前 state 中计算出的值，类似与 vue 中的computed; reactions: 是当 state 改变时需要自动发生的副作用。比如打印到控制台、网络请求、递增地更新 React 组件树以修补

How to save Mobx state in sessionStorage

由 南楼画角 提交于 2020-03-17 10:32:05
问题 Trying to essentially accomplish this https://github.com/elgerlambert/redux-localstorage which is for Redux but do it for Mobx. And preferably would like to use sessionStorage. Is there an easy way to accomplish this with minimal boilerplate? 回答1: The easiest way to approach this would be to have a mobx "autorun" triggered whenever any observable property changes. To do that, you could follow my answer to this question. I'll put some sample code here that should help you get started: function

mobx 初试小结

由 倖福魔咒の 提交于 2020-02-27 11:39:17
在属性改变的瞬间，做处理；（只需要执行一次）使用 when；这个在检测属性变化时操作很有效；可以和 react 中state de preValue, currentValue 改写而成； componentDidMount() { when(() => this.props.taskStore!.settingVisible, () => this.getRobotInfo()); } 这里表示的是一旦settingVisible 为true，则执行后面的操作；使用 reaction() 不符合条件； Store 注入组件接口的形式必须是可选的 import { inject, observer } from 'mobx-react'; @inject('store’) @observer Class TodayTask extends React.Component <{**taskStore?: TaskStore**}>{} 实践后的总体感觉 mobx 灵活性好，但不好管理，状态不够清晰，如果组件内的状态使用 mobx 有点大材小用，不如 state, 如果比较大的项目使用 mobx， 并不会比 redux 节省代码，并且没有 redux 统一好管理；初次使用觉得有点鸡肋吧。 来源： oschina 链接： https://my.oschina.net/hyzccc

React - Ability to control fill color of an SVG through props

由 て烟熏妆下的殇ゞ 提交于 2020-02-24 12:22:31
问题 I have a SVG, here called "example.svg", that's being called and created as a component, like so: import { ReactComponent as Example } from './example.svg'; import styles from './index.module.css'; const ExampleImg = ({ ...otherProps }) => ( <Example className={styles.image} {...otherProps} /> ); export default ExampleImg; This component is being called elsewhere - say on myPage - like this: const myButton = <ExampleImg {...nextButtonProps} />; My problem is this: I need to be able to control

mobx react action binding

由 こ雲淡風輕ζ 提交于 2020-02-02 13:11:28
问题 For those who has written apps with mobx + react , I'm wondering if there's a better way to handle context issue (eg. this. returns undefined in mobx store) when using onClick event handler inside a react component w/ inject & observer . I have been writing the handler like onClick={actionFromStore.bind(this.props.theStore)} to resolve that issue, but it seems like there should be more concise way to do this that I'm not aware of. I'm not a mobx expert, any advice would be appreciated! The

mobx react action binding

由 旧街凉风 提交于 2020-02-02 13:11:23
问题 For those who has written apps with mobx + react , I'm wondering if there's a better way to handle context issue (eg. this. returns undefined in mobx store) when using onClick event handler inside a react component w/ inject & observer . I have been writing the handler like onClick={actionFromStore.bind(this.props.theStore)} to resolve that issue, but it seems like there should be more concise way to do this that I'm not aware of. I'm not a mobx expert, any advice would be appreciated! The

mobx react action binding

由 拥有回忆 提交于 2020-02-02 13:10:31
问题 For those who has written apps with mobx + react , I'm wondering if there's a better way to handle context issue (eg. this. returns undefined in mobx store) when using onClick event handler inside a react component w/ inject & observer . I have been writing the handler like onClick={actionFromStore.bind(this.props.theStore)} to resolve that issue, but it seems like there should be more concise way to do this that I'm not aware of. I'm not a mobx expert, any advice would be appreciated! The

Using mobx store in react-navigation createStackNavigator

由 不想你离开。 提交于 2020-01-04 05:20:23
问题 I would like to use Mobx store variable in createStackNavigator in react-navigation. Specifically, I would like to change the initial route dynamically (so that user can change the initial screen) using the store. would this be possible? Something in the line of... const stack = createStackNavigator({ Home:{ ... }, { initialRouteName: this.props.store.initialScreen { }) Because this is not a class, I cannot integrate mobx store. Any ideas to change the initialRoute dynamically is appreciated!

Detect when mobx observable has changed

由 北战南征 提交于 2020-01-03 12:33:52
问题 Is it possible to detect when an observable changes in any way? For instance, say you have this: @observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }] And later on, with some user input, the values change. How can I detect this easily? I want to add a global "save" button, but only make it clickable if that observable has changed since the initial load. My current solution is to add another observable myObjectChanged that returns true/false, and wherever a component

Mobx Inject, Observer and HoC together

由 大兔子大兔子 提交于 2020-01-03 02:19:25
问题 Here a code that i have https://jsfiddle.net/v0592ua1/1/ const {observable, computed, extendObservable} = mobx; const {observer, inject, Provider} = mobxReact; const {Component} = React; const {render} = ReactDOM class AppState { @observable authenticated = false; @observable authenticating = false; } class Store2 { @observable blah = false; } function Protected(Component) { @inject("appState") @observer class AuthenticatedComponent extends Component { render() { const { authenticated,
订阅 mobx