你需要Mobx还是Redux？

import {observable, autorun} from 'mobx'; var todoStore = observable({ /* some observable state */ todos: [], /* a derived value */ get completedCount() { return this.todos.filter(todo => todo.completed).length; } }); /* a function that observes the state */ autorun(function() { console.log("Completed %d of %d items", todoStore.completedCount, todoStore.todos.length ); }); /* ..and some actions that modify the state */ todoStore.todos[0] = { title: "Take a walk", completed: false }; // -> synchronously prints: 'Completed 0 of 1 items' todoStore.todos[0].completed = true; // -> synchronously prints: 'Completed 1 of 1 items'

函数式和面向对象

Redux更多的是遵循函数式编程（Functional Programming, FP）思想，而Mobx则更多从面相对象角度考虑问题。

Redux提倡编写函数式代码，如reducer就是一个纯函数（pure function），如下：

(state, action) => { return Object.assign({}, state, { ... }) }

纯函数，接受输入，然后输出结果，除此之外不会有任何影响，也包括不会影响接收的参数；对于相同的输入总是输出相同的结果。

Mobx设计更多偏向于面向对象编程（OOP）和响应式编程（Reactive Programming），通常将状态包装成可观察对象，于是我们就可以使用可观察对象的所有能力，一旦状态对象变更，就能自动获得更新。

单一store和多store

store是应用管理数据的地方，在Redux应用中，我们总是将所有共享的应用数据集中在一个大的store中，而Mobx则通常按模块将应用状态划分，在多个独立的store中管理。

JavaScript对象和可观察对象

Redux默认以JavaScript原生对象形式存储数据，而Mobx使用可观察对象：

1. Redux需要手动追踪所有状态对象的变更；
2. Mobx中可以监听可观察对象，当其变更时将自动触发监听；

不可变（Immutable）和可变（Mutable）

Redux状态对象通常是不可变的（Immutable）：

switch (action.type) { case REQUEST_POST: return Object.assign({}, state, { post: action.payload.post }); default: retur nstate; } 

我们不能直接操作状态对象，而总是在原来状态对象基础上返回一个新的状态对象，这样就能很方便的返回应用上一状态；而Mobx中可以直接使用新值更新状态对象。

mobx-react和react-redux

使用Redux和React应用连接时，需要使用react-redux提供的Provider和connect：

1. Provider：负责将Store注入React应用；
2. connect：负责将store state注入容器组件，并选择特定状态作为容器组件props传递；

对于Mobx而言，同样需要两个步骤：

1. Provider：使用mobx-react提供的Provider将所有stores注入应用；
2. 使用inject将特定store注入某组件，store可以传递状态或action；然后使用observer保证组件能响应store中的可观察对象（observable）变更，即store更新，组件视图响应式更新。

选择Mobx的原因

1. 学习成本少：Mobx基础知识很简单，学习了半小时官方文档和示例代码就搭建了新项目实例；而Redux确较繁琐，流程较多，需要配置，创建store，编写reducer，action，如果涉及异步任务，还需要引入redux-thunk或redux-saga编写额外代码，Mobx流程相比就简单很多，并且不需要额外异步处理库；
2. 面向对象编程：Mobx支持面向对象编程，我们可以使用@observable and @observer，以面向对象编程方式使得JavaScript对象具有响应式能力；而Redux最推荐遵循函数式编程，当然Mobx也支持函数式编程；
3. 模版代码少：相对于Redux的各种模版代码，如，actionCreater，reducer，saga／thunk等，Mobx则不需要编写这类模板代码；

不选择Mobx的可能原因

1. 过于自由：Mobx提供的约定及模版代码很少，这导致开发代码编写很自由，如果不做一些约定，比较容易导致团队代码风格不统一，所以当团队成员较多时，确实需要添加一些约定；
2. 可拓展，可维护性：也许你会担心Mobx能不能适应后期项目发展壮大呢？确实Mobx更适合用在中小型项目中，但这并不表示其不能支撑大型项目，关键在于大型项目通常需要特别注意可拓展性，可维护性，相比而言，规范的Redux更有优势，而Mobx更自由，需要我们自己制定一些规则来确保项目后期拓展，维护难易程度；

代码对比

接下来我们使用Redux和Mobx简单实现同一应用，对比其代码，看看它们各自有什么表现。

架构

在Redux应用中，我们首先需要配置，创建store，并使用redux-thunk或redux-saga中间件以支持异步action，然后使用Provider将store注入应用：

// src/store.js import { applyMiddleware, createStore } from "redux"; import createSagaMiddleware from 'redux-saga' import React from 'react'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import { composeWithDevTools } from 'redux-devtools-extension'; import rootReducer from "./reducers"; import App from './containers/App/'; const sagaMiddleware = createSagaMiddleware() const middleware = composeWithDevTools(applyMiddleware(sagaMiddleware)); export default createStore(rootReducer, middleware); // src/index.js … ReactDOM.render( <BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter>, document.getElementById('app') ); 

Mobx应用则可以直接将所有store注入应用：

import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'mobx-react'; import { BrowserRouter } from 'react-router-dom'; import { useStrict } from 'mobx'; import App from './containers/App/'; import * as stores from './flux/index'; // set strict mode for mobx // must change store through action useStrict(true); render( <Provider {...stores}> <BrowserRouter> <App /> </BrowserRouter> </Provider>, document.getElementById('app') );

注入Props

Redux：

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

Mobx：

@inject('companyStore') @observer class CompanyContainer extends Component { componentDidMount () { this.props.companyStore.loadData({}); } render () { const { infos, loading } = this.props.companyStore; return <Company infos={infos} loading={loading} /> } }

定义Action／Reducer等

Redux：

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

Mobx:

// src/flux/Company/store.js import { observable, action } from 'mobx'; class CompanyStore { constructor () { @observable infos = observable.map(infosModel); } @action loadData = async(params) => { this.loading = true; this.errors = {}; return this.$fetchBasicInfo(params).then(action(({ data }) => { let basicInfo = data.data; const preCompanyInfo = this.infos.get('companyInfo'); this.infos.set('companyInfo', Object.assign(preCompanyInfo, basicInfo)); return basicInfo; })); } $fetchBasicInfo (params) { return fetch({ ...API.getBasicInfo, data: params }); } } export default new CompanyStore(); 

异步Action

如果使用Redux，我们需要另外添加redux-thunk或redux-saga以支持异步action，这就需要另外添加配置并编写模板代码，而Mobx并不需要额外配置。

redux-saga主要代码有：

// src/flux/Company/saga.js // Sagas // ------------------------------------ const $fetchBasicInfo = (params) => { return fetch({ ...API.getBasicInfo, data: params }); } export function *fetchCompanyInfoSaga (type, body) { while (true) { const { payload } = yield take(REQUEST_COMPANY_INFO) console.log('payload:', payload) const data = yield call($fetchBasicInfo, payload) yield put(receiveCompanyInfo(data)) } } export const sagas = [ fetchCompanyInfoSaga ];

一些想法

无论前端还是后端，遇到问题，大多数时候也许大家总是习惯于推荐已经普遍推广使用的，习惯，熟悉就很容易变成顺理成章的，我们应该更进一步去思考，合适的才是更好的。

当然对于“Redux更规范，更靠谱，应该使用Redux”或"Redux模版太多，太复杂了，应该选择Mobx"这类推断，我们也应该避免，这些都是相对而言，每个框架都有各自的实现，特色，及其适用场景，正比如Redux流程更复杂，但熟悉流程后就更能把握它的一些基础／核心理念，使用起来可能更有心得及感悟；而Mobx简单化，把大部分东西隐藏起来，如果不去特别研究就不能接触到它的核心／基本思想，也许使得开发者一直停留在使用层次。

所以无论是技术栈还是框架。类库，并没有绝对的比较我们就应该选择什么，抛弃什么，我们应该更关注它们解决什么问题，它们解决问题的关注点，或者说实现方式是什么，它们的优缺点还有什么，哪一个更适合当前项目，以及项目未来发展。

参考

1. An in-depth explanation of Mobx
2. Redux & Mobx
3. Mobx
4. Redux vs Mobx