Redux Mobx vs. Demo

import React from "react" import ReactDOM from "react-dom" import { makeAutoObservable } from "mobx" import { observer }  from "mobx-react" // Model the application state. class Timer { secondsPassed = 0 constructor() { makeAutoObservable(this) } increase() { this.secondsPassed += 1 } reset() { this.secondsPassed = 0 } } const myTimer = new Timer() // Build a "user interface" that uses the observable state. const TimerView = observer(({ timer }) => ( <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button> )) ReactDOM.render(<TimerView timer={myTimer} />, document.body) // Update the 'Seconds passed: X 'text every second. SetInterval (() = > {myTimer. Happens ()}, 1000) / / SRC/flux/Company/action. Js... Export function fetchContacts(){return dispatch => {dispatch({type: 'FREQUEST_COMPANY_INFO', payload: {}})}}... // src/flux/Company/reducer.js const initialState = {}; function reducer (state = initialState, action) { switch (action.type) { case 'FREQUEST_COMPANY_INFO': { return { ... state, contacts: action.payload.data.data || action.payload.data, loading: false } } default: return state; }} / / SRC/containers/Company js... class CompanyContainer extends Component { componentDidMount () { this.props.loadData({}); Render () {return <Company infos={this.props. Infos} loading={this.props. Loading} />}}... // function for injecting state into props const mapStateToProps = (state) => { return { infos: state.companyStore.infos, loading: state.companyStore.loading } } const mapDispatchToProps = dispatch => { return bindActionCreators({ loadData: loadData }, dispatch); } // injecting both state and actions into props export default connect(mapStateToProps, { loadData })(CompanyContainer);Copy the code