Redux против MobX: что лучше для вашего проекта?

3 причины не использовать MobX

1. Слишком много свободы

Redux — это фреймворк, обеспечивающий строгие правила написания кода состояния. Это означает, что вы можете легко писать тесты и разрабатывать поддерживаемый код. MobX является библиотекой и не имеет правил о том, как ее реализовать. Опасность заключается в том, что очень легко создавать ярлыки и применять быстрые исправления, которые могут привести к невозможности исправления кода.

2. Трудно отлаживать

Внутренний код MobX «магически» обрабатывает много логики, чтобы сделать ваше приложение реактивным. Есть невидимая область, где ваши данные проходят между хранилищем и вашим компонентом, что затрудняет отладку в случае возникновения проблем. Если вы изменяете состояние непосредственно в компонентах, без использования @actions , вам будет трудно определить источник ошибки.

3. Может быть лучшая альтернатива MobX

В разработке программного обеспечения постоянно появляются новые тенденции. В течение нескольких коротких лет современные программные технологии могут быстро потерять импульс. На данный момент существует несколько решений, конкурирующих как с Redux, так и с Mobx. Вот несколько примеров: Relay / Apollo & GraphQL , Alt.js и Jumpsuit . Любая из этих технологий может стать самой популярной. Если вы действительно хотите знать, какой из них лучше для вас, вам придется попробовать их все.

Сравнение кода: Redux против MobX

Достаточно теории, давайте посмотрим на код. Сначала мы сравним, как каждая версия выполняет загрузку.

Бутстрапирование

Версия Redux:
В Redux мы сначала определяем наш магазин, а затем передаем его в App через Provider . Нам также понадобится определить redux-promise-middleware и redux-promise-middleware для обработки асинхронных функций. Расширение redux-devtools-extension позволяет нам отлаживать наш магазин в режиме путешествия во времени.

 // src/store.js import { applyMiddleware, createStore } from "redux"; import thunk from "redux-thunk"; import promise from "redux-promise-middleware"; import { composeWithDevTools } from 'redux-devtools-extension'; import rootReducer from "./reducers"; const middleware = composeWithDevTools(applyMiddleware(promise(), thunk)); export default createStore(rootReducer, middleware); ------------------------------------------------------------------------------- // src/index.js … ReactDOM.render( <BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') ); 

Версия MobX:
В MobX нам нужно настроить несколько магазинов. В этом случае я использую только один магазин, который я поместил в коллекцию с именем allStores . Затем Provider используется для передачи коллекции магазинов в App .

Как упоминалось ранее, MobX не нуждается во внешних библиотеках для обработки асинхронных действий, следовательно, меньше строк. Однако нам нужно, чтобы mobx-remotedev подключился к redux-devtools-extension отладки redux-devtools-extension .

 // src/stores/index.js import remotedev from 'mobx-remotedev'; import Store from './store'; const contactConfig = { name:'Contact Store', global: true, onlyActions:true, filters: { whitelist: /fetch|update|create|Event|entity|entities|handleErrors/ } }; const contactStore = new Store('api/contacts'); const allStores = { contactStore: remotedev(contactStore, contactConfig) }; export default allStores; ------------------------------------------------------------------------------- // src/index.js … ReactDOM.render( <BrowserRouter> <Provider stores={allStores}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') ); 

Количество кода здесь примерно одинаково в обеих версиях. MobX имеет меньше операторов импорта, хотя.

Реквизит для инъекций

Версия Redux:
В Redux состояние и действия передаются реквизитам с помощью функции connect-) реагировать с избыточностью.

 // src/pages/contact-form-page.js … // accessing props <ContactForm contact={this.props.contact} loading={this.props.loading} onSubmit={this.submit} /> … // function for injecting state into props function mapStateToProps(state) { return { contact: state.contactStore.contact, errors: state.contactStore.errors } } // injecting both state and actions into props export default connect(mapStateToProps, { newContact, saveContact, fetchContact, updateContact })(ContactFormPage); 

Версия MobX:
В MobX мы просто добавляем коллекцию stores . Для этого мы используем @inject в верхней части класса контейнера или компонента. Это делает stores доступными в props , что, в свою очередь, позволяет нам получить доступ к определенному магазину и передать его дочернему компоненту. Доступ к состоянию и действиям осуществляется через свойства объекта store поэтому нет необходимости передавать их отдельно, как в случае с Redux.

 // src/pages/contact-form-page.js … @inject("stores") @observer // injecting store into props class ContactFormPage extends Component { … // accessing store via props const { contactStore:store } = this.props.stores; return ( <ContactForm store={store} form={this.form} contact={store.entity} /> ) … } 

Версия MobX, кажется, легче читать. Тем не менее, мы можем использовать redux-connect-decorators для упрощения кода Redux. В этом случае не будет явного победителя.

Определение магазинов, действий и редукторов

Чтобы облегчить эту статью, я покажу вам пример кода только для одного действия.

Версия Redux:
В Redux нам нужно определить действия и редукторы.

 // src/actions/contact-actions.js … export function fetchContacts(){ return dispatch => { dispatch({ type: 'FETCH_CONTACTS', payload: client.get(url) }) } } … // src/reducers/contact-reducer … switch (action.type) { case 'FETCH_CONTACTS_FULFILLED': { return { ...state, contacts: action.payload.data.data || action.payload.data, loading: false, errors: {} } } case 'FETCH_CONTACTS_PENDING': { return { ...state, loading: true, errors: {} } } case 'FETCH_CONTACTS_REJECTED': { return { ...state, loading: false, errors: { global: action.payload.message } } } } … 

 // src/stores/store.js … @action fetchAll = async() => { this.loading = true; this.errors = {}; try { const response = await this.service.find({}) runInAction('entities fetched', () => { this.entities = response.data; this.loading = false; }); } catch(err) { this.handleErrors(err); } } …