Forem: Sergey S. Volkov

Simple reactivity in React with MobX

Sergey S. Volkov — Tue, 29 Jul 2025 08:07:37 +0000

Hello everyone, I’d like to share one of the most convenient ways to work with reactive data in a React environment using MobX.

This article focuses on diving into and getting acquainted with MobX in the React ecosystem. If that sounds useful and interesting, then keep reading :)

Working with reactivity in React and handling reactive data is, in my view, always a rather labor-intensive process. Let me explain why…

All state in React has to be wrapped in use hooks, and we need various React wrappers to manage re-renders. For example:

const App = () => {
  const [input, setInput] = useState('');

  useEffect(() => {
    // do something
  }, [input]);

  return (
   <>
     <input value={input} onChange={e => setInput(e.target.value)} />
     <Child />
   </>
  )
}

const Child = memo(() => {
  return <div>child</div>
});

In this snippet, we use useEffect to perform operations whenever the input state changes, and that state itself comes from the useState hook. The parent component is wrapped in memo() to avoid unnecessary re-renders.

So, what do we end up with?

All business logic and processes in our front-end application get nailed to React and described through hooks. But was React created for this?

React was designed to make working with the DOM tree easier and cleaner—not to contain business logic.

What’s the alternative?

That’s where MobX comes in, offering a straightforward and ergonomic way to handle reactivity, which is exactly what we need in a React application.

Let’s rewrite the example above, but this time we’ll use MobX:

class AppViewModel {
  input = ''  

  constructor() {
    makeAutoObservable(this);
  }

  handleInputChange = (e) => {
    this.input = e.target.value;

    // do something
  }
}

const App = observer(() => {
  const [model] = useState(() => new AppViewModel())

  return (
   <>
     <input value={model.input} onChange={model.handleInputChange} />
     <Child />
   </>
  )
})

const Child = observer(() => {
  return <div>child</div>
});

In this version, we’ve removed React hooks as much as possible, leaving only the useState call that initializes state just once. All state-handling logic lives inside the AppViewModel class, and as a result, React now concerns itself solely with the view layer.

Conclusion

Using MobX in React projects provides frontend developers with a whole set of tangible advantages:

Minimal boilerplate code. You don't need actions, reducers, or complex configuration—just declare observable properties and methods, which significantly reduces development time and makes code shorter and cleaner.
Precise property-level reactivity. MobX automatically tracks which components depend on specific fields, so only what actually changed gets re-rendered, without additional optimizations like memo or useCallback.
Simple integration with MVVM pattern. The Store class essentially acts as a ViewModel: business logic and state live separately from the React component, which is responsible exclusively for rendering. This approach improves testability and code readability. Also MobX has open-source libraries like mobx-view-model for simple MVVM pattern integration.
Low entry barrier. Thanks to its object-oriented model, MobX is understandable to developers accustomed to working with classes and methods; the "observable → reaction" concepts are easier to grasp than Redux's strict unidirectional data flow.
Flexibility and scalability. MobX allows multiple stores, supports both mutable and immutable patterns, and easily integrates into existing code without imposing rigid architecture. This helps gradually "decouple" business logic from UI without global refactoring.
High performance out of the box. The reactive dependency tree and lazy computations (computed) ensure fast UI updates without manual optimization.
Excellent Developer Experience. Hot reloading, clear DevTools, and a rich ecosystem of helper libraries (mobx-react-lite, React MVVM, etc.) make daily work comfortable.

As a result, MobX transforms the React + MVVM combination into an easily maintainable architecture: the UI remains "dumb" and predictable, while all logic is concentrated in testable ViewModel classes. This is exactly why MobX remains a sought-after tool when you need to deliver features quickly without drowning in boilerplate and without sacrificing performance.

[Boost]

Sergey S. Volkov — Fri, 09 May 2025 17:52:09 +0000

Sergey S. Volkov

May 4 '25

Diving into MobX

#webdev #javascript #react #mobx

Comments

4 min read

Diving into MobX

Sergey S. Volkov — Sun, 04 May 2025 17:57:08 +0000

Hello, my name is Sergey and I am working in web development about 9 years.

I tried a lot of various frameworks and state managers (even Effector, but I'm not sure that you have heard about this STM)

So, last year I'm working with MobX, and I can say this state manager is something out of the ordinary from the perspective of other state managers.
I mean all modern and hype state managers gives you specific API to work with reactivity data.
Let me illustrate this with comparisons. In Redux Toolkit, you dance to the rhythm of actions:

dispatch(increment()); // Action -> Reducer -> Update

Zustand takes a more casual approach — like updating a notebook directly

const useStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

// In component. Note this.
useStore.getState().increment();
// Direct state mutation (immutable under the hood)

Jotai embraces atomic Zen — you modify individual particles of state:

const countAtom = atom(0);

// In component
const [count, setCount] = useAtom(countAtom);
setCount(prev => prev + 1); // Feels like useState for global state

Meanwhile, MobX whispers: "Just mutate naturally, I'll handle the rest":

class Store {
  @observable count = 0;

  @action
  increment = () => {
    this.count += 1; // Direct mutation ✨ Magic happens here
  }
}

The Framework vs The Language

Notice a pattern? Redux, Zustand, Jotai — they all dictate reactivity through framework-specific verbs:

dispatch() (Redux)
set() (Zustand)
useAtom() (Jotai)

You're essentially speaking their language, wrapping your logic in their reactivity protocols.

MobX flips this paradigm. Instead of:

"Hey library, please update state via your API"

It says:

"Hey JavaScript, BE reactive"

Through decorators (@observable, @action) or modern makeObservable, MobX extends your vanilla JS objects with reactive superpowers:

class Cart {
  items = [];
  total = 0;

  constructor() {
    // after this
    makeAutoObservable(this);
    // the 'items', 'total' become
    // reactive
  }

  addItem(item) {
    this.items.push(item); 
    this.total += item.price;
  }
}

const cart = new Cart();

Why This Matters

No "Reactivity Tax" Your business logic remains framework-agnostic. A MobX store could work in Vue (theoretically) — it's just a class.
Natural Mutation cart.items[3].price = 20 triggers updates automatically. No set({...}) gymnastics.
Reactivity as Language Feature MobX isn't a framework — it's a reactive runtime for JS, like turning JavaScript into Vue's reactivity system.

The Tradeoff

With great power comes implicit behavior. While:

reduxStore.count = 5 // ❌ Won't update anything (need dispatch)  
mobxStore.count = 5 // ✅ Automatically propagates (if observable)

...this requires understanding MobX's tracking mechanics. You're not calling reactivity — you're being reactive.

Why Choose MobX? The Case for Effortless Reactivity

In the ever-evolving landscape of state management, MobX stands apart not just as a library, but as a paradigm shift. Here’s why it deserves your attention:

1. It Speaks Your Language
MobX doesn’t force you to learn a new dialect of reactivity. Write JavaScript (or TypeScript) as you always have—mutate objects, call methods, compose classes—and let MobX silently wire up reactivity. It’s like upgrading JS with a superpower you didn’t know you needed.

// This isn’t “MobX code”—it’s just your code.  
user.name = "Alice";  
cart.items.push(product);

No dispatch, no set, no boilerplate. Just state.

2. It Trusts You to Mutate

While other libraries treat direct mutation as a sin, MobX embraces it. By decoupling state updates from reactivity mechanics, it liberates you to:

Refactor fearlessly: Business logic stays pure, untangled from framework APIs.
Iterate faster: No more "action creators" or "reducers"—just update objects.
Write tests that focus on domain behavior, not reactivity rituals.

3. It Scales with Your Brain

MobX scales vertically (complex domains) and horizontally (large teams) because:

OOP-friendly: Model entities as classes, not JSON blobs.
Precision tracking: Components re-render only when exact dependencies change, not entire branches.
Zero glue code: No sagas, thunks, or context providers—just observables and reactions.

4. It’s Framework Agnostic (But Loves React)
MobX works seamlessly with React, Vue, Angular, or vanilla JS. Its React bindings (mobx-react-lite) are so lightweight, you’ll forget they’re there:

// React component
const Cart = observer(() => {
  const { items, total } = cartStore; // Auto-subscribes to used fields
  return <div>{items.length} items (${total})</div>;
});

The observer HOC is the only concession to React—everything else is pure logic.

5. It’s Battle-Tested
From enterprise monoliths to nimble startups, MobX powers:

Microsoft
Bloomberg’s financial dashboards
Coinbase’s trading interfaces

Its decade-long evolution proves that implicit reactivity isn’t just clever—it’s robust.

You can read more about companies who uses MobX here

When to Choose MobX?

🟢 You value developer experience over rigid structure.
🟢 Your domain model is complex and object-oriented.
🟢 You want React-like reactivity without React-like constraints.
🟢 You’re tired of typing dispatch(action(payload)).

When to Think Twice?

🔴 You need strict architectural guardrails (MobX is flexible, not opinionated).
🔴 Your team fears “magic” (reactive tracking is implicit).
🔴 You’re building a tiny app (overkill for simple state).

The Verdict

MobX isn’t just a state manager—it’s a philosophy. It asks: What if reactivity wasn’t something you call, but something that just happens?

If you crave code that reads like plain JavaScript but behaves like a finely tuned reactive system, give MobX a try. You might just forget you’re using a library—and that’s the highest compliment a tool can receive.

Sergey, signing off. Happy mutating! 🚀

So what is Effector ☄️ ?

Sergey S. Volkov — Sat, 10 Dec 2022 00:15:25 +0000

Nowadays, frontend applications build with using redux(rtk)/mobx state-managers because they modern and hype trends.

Effector, it is the another way to create state and business logic for your frontend application.

In this article, I just want to introduce you with effector!

⚙️ How to use

Effector has three main units: stores, effects, events.
Seems simple? But not everything is as simple as it seems🙂

☄️ Stores

The Store is an object which stores the state value.
You can create store using createStore(initialState)

const $store = createStore(1);

Now we have $store with numeric state, which has value 1

☄️ Events

The Event is a simple function with one argument which returns this argument, but also this unit prepared for another effector operations (will be mentioned below). Better to think that this is intention to change the state.

In general there are two types of events:

something happened on UI, e.g. loginButtonPressed, inputValueChanged
Event which changes the state, e.g. loginInUser, changeInputValue

You can create event using createEvent(name?)

const changeStore = createEvent<number>()

Now we have changeStore event with numeric payload.

Let's create a bit more events for our example

const incrementButtonPressed = createEvent()
const decrementButtonPressed = createEvent()

☄️ Effects

The Effect is a container for async function. If we compare it with Redux Toolkit, we can relate this unit to async thunk.

Effects in Effector are used to create and handle async operations or side effects

Effects should be used for impure actions, e.g. AJAX, working with localStorage, some code which can throw an exception.
In general, you will use effects for making requests.

You can create effect using createEffect(handler)

const sendStateToServerFx = createEffect(async (state: number) => {
  const response = await fetch('/server', {
    method: 'post',
    body: state
  })
})

Now we have sendStateToServerFx effect with numeric payload

Let's to sum up that we had managed to create

const $store = createStore(1);
const changeStore = createEvent<number>();
const incrementButtonPressed = createEvent()
const decrementButtonPressed = createEvent()
const sendStateToServerFx = createEffect(async (state: number) => {
  const response = await fetch('/server', {
    method: 'post',
    body: state
  })
})

How to connect it all together ?

Effector has a lot of methods to work with data flow, but in this article we will try to use only one sample method

import { sample } from "effector"

sample it is universal multipurpose method to work with data flow

Now we need to put value from changeStore payload to $store store

sample({
  source: changeStore,
  target: $store,
})

This operation says "when source will be called, take value from source and send it to target"

Now if we call changeStore(100) then $store will have value 100 in state

Now we need send $store value to server when it will be changed

sample({
  source: $store,
  target: sendStateToServerFx,
})

Two samples, but what if we can create only sample ? Let's try

sample({
  source: changeStore,
  target: [sendStateToServerFx, $store],
})

But what if we need to prevent this changes when sendStateToServerFx is in pending state (request is calling/response is fetching)

sample({
  source: sendStateToServerFx.pending,
  clock: changeStore,
  filter: (pending, value) => !pending,
  fn: (pending, value) => value,
  target: sendStateToServerFx,
})

This operation says "when clock will be called, take value from source and send it to the filter. If filter returns true then call fn and returned value from fn send to target, otherwise skip fn and target steps"

Also we forget about increment and decrement events, let's connect them to our store

sample({
  source: $store,
  clock: incrementButtonPressed,
  fn: (state) => state + 1,
  target: changeStore,
})

sample({
  source: $store,
  clock: decrementButtonPressed,
  fn: (state) => state - 1,
  target: changeStore,
})

I think now sample looks a little more complicated than it used, but it is very powerful!
Here is a link to effector playground to check this code

So, let's connect this to React

import { FC } from "react";
import { useUnit } from "effector-react";

const MyComponent: FC = () => {
  const state = useUnit($store)

  return (
    <div>
      <button onClick={() => decrementButtonPressed()}>
       -1
      </button>
      <span>
      {state}
      </span>
      <button onClick={() => incrementButtonPressed()}>
       +1
      </button>
    </div>
  )
}

Now we have made the basic counter with one specific thing - safety sending counter data to server.

And React knows about events and data-to-render only, we don't need to create payload for events\effects inside React, because we can store this logic inside effector.

📦 What about size?

Core library package has 10.4KB gzipped size (bundlephobia)

React bindings package has 3.7KB gzipped size (bundlephobia)

Summarize

Effector has a lot of methods to create data-flow in your frontend application (attach, combine, merge, restore, guard, forward etc).

Using this library, you can declare all business logic for your frontend application. Even complex cases.

You can separate UI-logic from business logic with using this library.

Currently, many companies actively use the effector as data-flow\state manager in their own frontend applications.

I hope you will try this powerful tool ❤️

Thanks for reading, good luck!

Why Swagger schemes are needed in frontend development ?

Sergey S. Volkov — Tue, 24 Mar 2020 19:12:21 +0000

Hi everyone! 👋

Question which I ask in title of this article is quite actual even for modern projects because in frontend development we use Swagger not at 100%.

In Russian big IT companies where I worked even not known about Swagger (That's truth) and that's not good. Current company where I work build all interaction between client and server via Swagger schemas. With Swagger client gets type checking and all endpoints.

Some teams when being developing frontend project makes manually all requests to the server, declaring types and endpoints looking at Swagger schema. It is not needed to do because already have ~~ready solutions~~ codogenerators for that.

Codegenerators 🖨

In company where I currently work use own frontend code generator API module based on Swagger schema, because of this I can't use it for personal use, and search ready solutions was so hard (may be I just wanted to create own)

For example what I found in npm:

api-client-generator - generates Angular service but what if I have React application ?
swagger-taxos-codegen - generates TypeScript Api module, but it requires axios in project.
@ps-aux/swagger-codegen - May be that's what I'm looking for but it not have any description. What if that is virus ? :)
swagger-api-ts-generator - I'm not sure that this is for frontend development
@openapitools/openapi-generator-cli - This really helpful tool, which supports different generator cases like Dart, Angular or even Flow. But it generates big count of output files what don't needed to me (typescript-fetch generator) and also I was tempted to create own tool

This and all other ready solutions were not suitable for my needs, because I wanted to get API module from tool, which will use Fetch API for generating requests and will not have anything extra like Angular service or axios.

In this way I start working at own codegenerator and gave him most simple and obvious name - swagger-typescript-api

swagger-typescript-api 🎉

acacode / swagger-typescript-api

Generate the API Client for Fetch or Axios from an OpenAPI Specification

Swagger TypeScript API

Support for OpenAPI 3.0, 2.0, JSON and YAML
Generate the API Client for Fetch or Axios from an OpenAPI Specification

Any questions you can ask here: https://github.com/acacode/swagger-typescript-api/discussions

Examples

All examples you can find here: https://github.com/acacode/swagger-typescript-api/tree/main/tests

Usage

You can use this package in two ways:

CLI

npx swagger-typescript-api generate --path ./swagger.json

Or install locally in your project:

npm install --save-dev swagger-typescript-api
npx swagger-typescript-api generate --path ./swagger.json

Library

npm install --save-dev swagger-typescript-api

import * as path from "node:path";
import * as process from "node:process";
import { generateApi } from "swagger-typescript-api";

await generateApi({ input: path.resolve(process.cwd(), "./swagger.json") });

For more detailed configuration options, please consult the documentation.

Mass media

License

…

View on GitHub

I'll tell right away about his benefits over other alternatives:

Supports Swagger 2.0, OA 3.0, and also file formats json, yaml
Generated code not have any additional dependencies (like axios). Just generate API module and enjoy.
Good types parsing from schema.
Have extra features to use generated code in NodeJS environment.
Flexible - we can override any method or property of generated API class.
Not highly specialized - It could work for Angular applications and for React
Good support - I have Slack channel, where I'll answer at any questions based this tool.
Ability to use custom codegenerator templates based on ETA syntax

For what it neeeded ? 🤷‍♂️

Before at all it's type checking, which in my humble opinion very important in frontend development. TypeScript will give information that you send wrong typed structure to the server and it should be fixed.

Next case it is no needs to write endpoints manually. It should to reduce count of problems of interaction between client and server.

How to use 🚀

It's real simple. Just put it to console:

npx swagger-typescript-api -p path-or-url/to-your-swagger/schema.json -o src

  -p, --path <path>             path/url to swagger scheme
  -o, --output <output>         output path of typescript api file (default: "./")
  -n, --name <name>             name of output typescript api file (default: "Api.ts")
  -t, --templates <path>        path to folder containing templates
  -d, --default-as-success      use "default" response status code as success response too.
                                some swagger schemas use "default" response status code
                                as success response type by default. (default: false)
  -r, --responses               generate additional information about request responses
                                also add typings for bad responses (default: false)
  --union-enums                 generate all "enum" types as union types (T1 | T2 | TN) (default: false)
  --route-types                 generate type definitions for API routes (default: false)
  --no-client                   do not generate an API class
  --enum-names-as-values        use values in 'x-enumNames' as enum values (not only as keys) (default: false)
  --js                          generate js api module with declaration file (default: false)
  --extract-request-params      extract request params to data contract (default: false)
                                Also combine path params and query params into one object
  --module-name-index <number>  determines which path index should be used for routes separation (default: 0)
                                (example: GET:/fruites/getFruit -> index:0 -> moduleName -> fruites)
  --module-name-first-tag       splits routes based on the first tag
  --modular                     generate separated files for http client, data contracts, and routes (default: false)
  --disableStrictSSL            disabled strict SSL (default: false)
  --clean-output                clean output folder before generate api. WARNING: May cause data loss (default: false)
  --axios                       generate axios http client (default: false)
  --single-http-client          Ability to send HttpClient instance to Api constructor (default: false)
  --silent                      Output only errors to console (default: false)
  --default-response <type>     default type for empty response schema (default: "void")

For example:

npx swagger-typescript-api -p http://js2me.pw/api/v1/swagger.json -o src

More examples you can find here

Thanks for reading!

Own state manager in 80 lines

Sergey S. Volkov — Wed, 18 Mar 2020 10:08:34 +0000

Reffect

acacode / reffect

The state manager

Reffect — is a declarative and reactive multi-store state manager for JavaScript/TypeScript applications inspired by Reatom and Effector

Packages

@reffect/core - main features (creating stores and effects)
@reffect/react - bindings for React
@reffect/logger - store middleware to log each store update
@reffect/localstore - store middleware to synchronize store with local storage key
@reffect/undoable - store extension which provides undo/redo effects and store history
@reffect/strict - store middleware for making store updates more strict

Install

Before at all you need to install the main package:

$ npm i -S @reffect/core
# or using yarn
$ yarn install @reffect/core

If a project is using React you need to install @reffect/react (pack of React hooks which simplify usage with React application)

$ npm i -S @reffect/react

Examples

Simple counter

import { store, effect, manage } from "@reffect/core";
const counter = store({ value: 0 });

const

…

View on GitHub

My goal was to create new state manager which will be more simpler than all other alternatives.

Package have three exports - createStore, effect and manageStore and that's all.

with createStore we are creating a store.
effect() create a store's "effect" which will update store.
State of store contains in return value from createStore function.
manageStore is needed for subscribe on store changes.

Sounds simple, take a look how it looks in practice :)

For example we have a library with books.
First of all we should create a store

import { createStore } from "@reffect/core"

const books = createStore({
  all: [],
  selected: null,
})

Now we have a books store. We can use state just using books variable

const filtered = books.all.filter(book => book.genre === "classic")

But we need add some books into the store. Lets do that via effect()

import { effect } from "@reffect/core"

const addBook = effect(books, book => ({
  ...books,
  all: [...books.all, book],
}))

addBook({
  author: "E.B. White",
  name: "Charlotte's Web",
  year: 1952,
  genre: "fantasy",
})

console.log(books.all) // [{ ... Charlotte's Web }]

Also we can combine effects


const setBooks = effect(books, "all")

const addBook = effect(books, book => setBooks([...books.all, book]))

There's no need any reducers or actions. We have only effect which is action and reducer. Also all created effects return void

setBooks([]) // returns undefined

Conclusion

It's not a redux killer. Just I've created it to have a minimal bundle size of my frontend application and make state management more simpler for me.

Currently it still may have bugs and problems but I already use it in my personal projects.

Make your own custom theme for VS Code

Sergey S. Volkov — Sat, 15 Jun 2019 23:32:44 +0000

Hi everyone! :)

A few days ago I found some extension which allows you to load custom CSS and JS files into Visual Studio Code. And if have interest to modify your using theme or make own CSS styles for Visual Studio Code this article can helps you :)

Extenstion which is needed for us it is Custom CSS and JS Loader. You need to install it

After installing you need to turn on this extension. Open your command palette with Ctrl + Shift + P or Shift + ⌘ + P or F1 and choose "Enable custom CSS and JS". It will prompt you to restart.

Next step you need to create CSS file on your file system and add path to this file to property vscode_custom_css.imports in settings.json of VS Code.

{
  "vscode_custom_css.imports": [
    "file:///{PATH_TO_THIS_FILE}/{YOUR_FILE_NAME}.css"
  ]
}

If you are using Windows (like me) you need to write path to file like this

{
  "vscode_custom_css.imports": [
    "file:///C:/Users/User/vs_dark.css"
  ]
}

You can put to this CSS file one of following styles:

Also if you attached synthwave84.css you should install this theme to VS Code or if you use my VS Code dark theme extension you should select Dark+ (default dark) theme in VS Code

After this you need to reload VS Code to enable this custom css files.
For that you need to open up command palette and choose "Reload custom CSS and JS"

After that you should see the CSS modifications in your VS Code :)

Or if you attach synthwave.css your VS Code editor should looks like

And if you want to debug and modify this file you need to open up command and choose "Developer: Toggle Developer Tools".

It open up developer tools which are the same as in Google Chrome.

And your custom styles are overriding existing

If you have some question don't worry to ask here
Thanks for read this article, enjoy :)

Extra links

Stonex — predictable simple state container

Sergey S. Volkov — Thu, 23 May 2019 10:42:16 +0000

Hi everyone! 🙂

I want to suggest my library which allows you to manage and store data better and simpler than other similar libraries.

Stonex it is predictable state container with React like syntax

Solution why I decided to create stonex was experience of working with another stonex like libraries where I didn’t like most approaches and I wished to create own solution. I was should to write too many of code for the creating structure similar with stonex module and also was needed to attach too many dependencies. And because of this I decided to create the stonex, which makes your front-end development more easily!

js2me / stonex

💡 Simple state container for JavaScript/TypeScript applications 💡

🌀 State container for JavaScript/TypeScript applications 🌀️

What is that ?
How to use
Documentation:
- Stonex Store
- Stonex Module
- StateWorker
- createStoreBinder
License

❓ What is that ?

This is a simple and easy library for managing/storing data.
It allows you to store and manage data correctly, and also combine all business logic into separated Stonex modules.

Easily configurable, most things can be overridden if necessary.

As well as in other similar libraries, each Stonex module has its own state and actions. But, unlike other libraries, most of the Stonex features are provided "out of the box", for example, the creating asynchronous actions.

The syntax of the modules is almost identical to the syntax of the ReactJS component.

Also currently Stonex is supporting integrations with: ReactJS (react-stonex)

💡 How to use

1. Needs to install it:

  npm i -S stonex
  # or

…

View on GitHub

Also Stonex already have support of ReactJS!

Why Stonex ?

In applications where data is shared among components (react, angularjs, vue, etc), it might be confusing to know where a state should live. Ideally, the data in a component should live in just one component. So sharing data among sibling components becomes more difficult.

Let’s take a look at example of ReactJS component:

class Login extends React.Component {

  changeForm = ({ target }) => {
   this.setState({ [target.name]: target.value })
  }

  render() {
   const { firstName, lastName } = this.state

   return (
     <div>
       <input value={firstName} name="firstName" onChange={this.changeForm} />
       <input value={lastName} name="lastName" onChange={this.changeForm} />
     </div>
   )
  }

}

What should I do if there need to display the state data of this component in completely different parts of the application? Of course, we can use Context API, but it will not be a universal and not quite flexible solution.

But what if we have the one stonex reactjs component which contains all necessary application data? In this way works Stonex so in this way send application data will not have any difficulties!

How it will looks with stonex solution:

// login component
import { connect } from 'react-stonex'

const Login = ({ firstName, lastName, changeAuthData }) => (
 <div>
   <input value={firstName} onChange={e => this.changeAuthData('firstName', e.target.value)} />
   <input value={lastName} onChange={e => this.changeAuthData('lastName', e.target.value)} />
 </div>
)

export default connect((state, modules) => ({
  firstName: state.auth.firstName,
  lastName: state.auth.lastName,
  changeAuthData: modules.auth.changeAuthData,
}))(Login)


// somewhere in sidebar component
import { connect } from 'react-stonex'

const Sidebar = ({ firstName, lastName }) => (
 <div>
   <span>Hello, {firstName} {lastName}</span>
 </div>
)

export default connect((state, modules) => ({
  firstName: state.auth.firstName,
  lastName: state.auth.lastName,
}))(Sidebar)

As you see exchange application data between components has no difficulties. And let’s take a look at Stonex Auth module:

export default {
  state: { firstName: '', lastName: '' }

  changeAuthData(name, value) {
    this.setState({
      ...this.state,
      [name]: value
    })
  }
}

Looks easy, isn’t it? 😁

Deep dive into Stonex

Before at all you need to install stonex

npm i -S stonex
# or using yarn
yarn add stonex

Stonex currently have exports: StonexStore, StonexModule, createStoreBinder, StateWorker. Last two exports more needed as middlewares.

StonexStore

That’s what link all your modules together and makes wonderful store container! 😉

What is needed to me if I want to create a StonexStore instance?

Almost nothing, just only object with your modules! See example:

// store.js

import { StonexStore } from 'stonex'
import modules from './modules'

const store = new StonexStore(modules)

modules should be an object with keys where key it is the name of your module and value it is the reference of StonexModule class (not only class, it could be just object, but about this written further). See example:

// ./modules/index.js
import UsersModule from './UsersModule'
import AuthModule from './AuthModule'
import ModalsModule from './ModalsModule'

const modules = {
  users: UsersModule,
  auth: AuthModule,
  modals: ModalsModule
}

export default modules

If you want to add some middleware or override place where stonex works with state you can use additional argument of StonexStore. More about Stonex middlewares is here.

Here is example of how to add some modifier and custom state worker to the store

// store.js

import { StonexStore } from 'stonex'
import modules from './modules'

import Logger from './modifiers/Logger'
import AppStateWorker from './common/AppStateWorker'

const storeConfiguration = {
  modifiers: [ // middlewares
    Logger
  ],
  stateWorker: AppStateWorker
}

const store = new StonexStore(modules, storeConfiguration)

StonexModule

Stonex module it is a special class/object which contains all information/actions linked with specific state. More about it is here.

How it looks:

import { StonexModule } from 'stonex'

class UsersModule extends StonexModule {
  state = []
  addUser = user => this.setState([...this.state, user])
  removeAllUsers = () => this.resetState()
}


export default UsersModule

As I said earlier stonex modules can be the references on classes but it is not always. You can create a pure stonex module (It is the same but looks easier):

// ./modules/index.js

// don't worry about context. It links when module attaching to the store!
// Also all methods (like 'this.setState' ) from StonexModule class automatic will been inherited
const pureModule = {
  state: {},
  addItem(item){
   this.setState({...this.state, [item.name]: item })
  }
}

const modules = {
  pureModule
}

export default modules

Note: pure modules not supports arrow functions as properties.

Conclusion

As I said this project is not ended, but already contains on NPM. I’m use it in my pet projects and soon will migrate some enterprise web project on stonex.

Currently I’m working on the covering code of unit tests and write documentation anywhere it is possible.

Thanks for reading! I’m really hope that this article helps you.

Will be glad to see any contributions or questions about this project! 🙂

Happy coding! 🌟✨🎉

Extra inks

Sample project with react and stonex on Github is here
NPM: https://www.npmjs.com/package/stonex
GitHub: https://github.com/acacode/stonex

Forem: Sergey S. Volkov

Simple reactivity in React with MobX

So, what do we end up with?

What’s the alternative?

Conclusion

[Boost]

Diving into MobX

Diving into MobX

The Framework vs The Language

Why Choose MobX? The Case for Effortless Reactivity

The Verdict

So what is Effector ☄️ ?

⚙️ How to use

☄️ Stores

☄️ Events

☄️ Effects

Let's to sum up that we had managed to create

How to connect it all together ?

So, let's connect this to React

📦 What about size?

Summarize

Why Swagger schemes are needed in frontend development ?

Codegenerators 🖨

swagger-typescript-api 🎉

acacode / swagger-typescript-api

Generate the API Client for Fetch or Axios from an OpenAPI Specification

Swagger TypeScript API

Examples

Usage

CLI

Library

Mass media

License

For what it neeeded ? 🤷‍♂️

How to use 🚀

Own state manager in 80 lines

Reffect

acacode / reffect

The state manager

Packages

Install

Examples

Conclusion

Make your own custom theme for VS Code

Extra links

Stonex — predictable simple state container

js2me / stonex

💡 Simple state container for JavaScript/TypeScript applications 💡

Table of Contents

❓ What is that ?

💡 How to use

Why Stonex ?

Deep dive into Stonex

StonexStore

StonexModule

Conclusion

Extra inks