Show HN: Own MobX in 65 lines of code
github.com
Show HN: Own MobX in 65 lines of code
1–6 of 6 posts
Re: Show HN: Own MobX in 65 lines of code
#2When I started a new React-project at my work, I asked myself: "Why do I need any external dependencies for state management such as Redux or MobX? What functionality from this dependencies do I need in the first place?".
I realised that I just want to have many views connected to one dataset, and I want to re-render all connected views when dataset was changed. This is a simple pub-sub pattern which everyone can implement himself. So, I implemented it myself in just 65 lines of code. I use this solution in production for 6 months and don't see any drawbacks.
What are the advantages of Redux or MobX over this solution?
Re: Show HN: Own MobX in 65 lines of code
#3I have been implementing reactive stores using streams. I followed the Meiosis pattern[1] and have found it to be dead simple. My current project has a React UI and a WebGL canvas that both refer to and modify the store. Flyd is a tiny stream library that Meiosis uses in its examples.
Re: Show HN: Own MobX in 65 lines of code
#4When I started a new React-project at my work, I asked myself: "Why do I need any external dependencies for state management such as Redux or MobX? What functionality from this dependencies do I need in the first place?". I realised that I just want to have many views connected to one dataset, and I want to re-render all connected views when dataset was changed. This is a simple pub-sub pattern which everyone can imp…
Speaking for Redux at least: developer tool integration, mindshare and doesn't shoehorn OOP into an FP approach to UI.
What are the advantages of this solution over features already in React (no need of Redux) such as context and the reduce hook?
Re: Show HN: Own MobX in 65 lines of code
#5When I started a new React-project at my work, I asked myself: "Why do I need any external dependencies for state management such as Redux or MobX? What functionality from this dependencies do I need in the first place?". I realised that I just want to have many views connected to one dataset, and I want to re-render all connected views when dataset was changed. This is a simple pub-sub pattern which everyone can imp…
Speaking for Redux at least: developer tool integration, mindshare and doesn't shoehorn OOP into an FP approach to UI. What are the advantages of this solution over features already in React (no need of Redux) such as context and the reduce hook?
Redux also has some more nice features around middleware which is great for data interception and manipulation, and selectors which can be great for performance if memoized. Also, you don't need redux for it, but the idea of separating pure view code and code that does network calls and implements business logic is really useful.
At the end of the day, you can write whatever you want from scratch, but it becomes a cost/benefit analysis.
I like this repo for getting into the guts of how popular tech works: https://github.com/danistefanovic/build-your-own-x
Re: Show HN: Own MobX in 65 lines of code
#6When I started a new React-project at my work, I asked myself: "Why do I need any external dependencies for state management such as Redux or MobX? What functionality from this dependencies do I need in the first place?". I realised that I just want to have many views connected to one dataset, and I want to re-render all connected views when dataset was changed. This is a simple pub-sub pattern which everyone can imp…
Speaking for Redux at least: developer tool integration, mindshare and doesn't shoehorn OOP into an FP approach to UI. What are the advantages of this solution over features already in React (no need of Redux) such as context and the reduce hook?
> doesn't shoehorn OOP into an FP approach to UI
Functional UI is still need some sort of imperative shell [1] to manage state. You can use OOP and Remold just for "reactive" behaviour, and implement all state transitions inside object in a functional way. For example:
// Pure function
const addProduct = (order, product) => ({
total: order.total + product.price,
});
// Imperative state
class Order extends Remold {
state = {
total: 0
};
@act setState(newState) { this.state = newState; }
addProduct(p) { this.setState(addProduct(this.state, p)); }
}
From the React Documentation about Context feature [2]:
> Apply it sparingly because it makes component reuse more difficult.
With Remold you don't have any problems with component's reusability. You just attach pure component to an object and "connect" object's state into component's props:
// Pure component
const OrderWidget = ({ total }) => {total};
// Pure function
const addProduct = (order, product) => ({
total: order.total + product.price,
});
// Imperative state
class Order extends Remold {
state = {
total: 0
};
@act setState(newState) { this.state = newState; }
addProduct(p) { this.setState(addProduct(this.state, p)); }
@mold(OrderWidget) asWidget() { return { total: this.state.total }; }
}
[2] https://reactjs.org/docs/context.html?no-cache=1#before-you-...