javascript 比较mobx-state-tree和redux

Posted 2021-05-03

import React, { Component } from "react";
import { Provider, inject, Observer, observer } from "mobx-react";
import { types as t } from "mobx-state-tree";

//declare application state
const Users = t
  .model({
    userName: t.optional(t.string, "Franz")
  })

  //permitted operations on state
  .actions(self => ({
    updateName: name => {
      self.userName = name;
    }
  }));

const userInstance = Users.create();

var ConnectedComponent = inject("user")(
  observer(props => <b>{JSON.stringify(props)}</b>)
);

class App extends Component<any> {
  render() {
    return (
      <Provider user={userInstance}>
        <Observer>
          {() => (
            <div>
              <h1>Mobx + Mobx State Tree</h1>
              <ConnectedComponent />
            </div>
          )}
        </Observer>
      </Provider>
    );
  }
}

setInterval(
  () => userInstance.updateName(new Date().getTime().toString()),
  1000
);

export default App;

import React, { Component } from "react";
import { combineReducers, createStore, applyMiddleware } from "redux";
import { Provider, connect } from "react-redux";
import thunk from "redux-thunk";

//declare application state
const User = (
  state = {
    userName: "Franz"
  },
  action
) => {
  switch (action.type) {
    case "UPDATE_NAME":
      return {
        userName: action.userName
      };
    default:
      return state;
  }
};

const updateName = name => dispatch => {
  dispatch({
    type: "UPDATE_NAME",
    userName: name
  });
};

const rootReducer = combineReducers({
  User
});

const configureStore = () => {
  return createStore(rootReducer, applyMiddleware(thunk));
};

const mapStateToProps = state => ({
  ...state
});

const mapDispatchToProps = dispatch => ({
  updateName: () => dispatch(updateName())
});

const store = configureStore();

const ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(props => <b>{JSON.stringify(props)}</b>);

setInterval(
  () => store.dispatch(updateName(new Date().getTime().toString())),
  1000
);

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <h1>Redux</h1>
          <ConnectedComponent />
        </div>
      </Provider>
    );
  }
}

export default App;