Sometimes React.js alone may serve your need, you don't have to prematurely flux it.
The Case for Flux — Startups, Wanderlust, and Life Hacking — Medium
And there are other strategies besides Flux for architecting your application.
6 no-Flux strategies for React component communication
What the Flux? An Overview of the React State Management Ecosystem - The New Stack
André Staltz - Unidirectional User Interface Architectures
What is the best state container library for React?
Gist of a modern data-driven app:
- don’t use fat models
- unidirectional data flow
- SINGLE source of truth
- mutate data via a SINGLE component
- data from server is just another input, not your model
- CQRS
- Event Sourcing
ampersandjs
reduxjs
reactive-programming
React Easy State
Design Patterns with React Easy State – DailyJS – Medium
solkimicreb/react-easy-state: Simple React state management. Made with ❤️ and ES6 Proxies.
The Ideas Behind React Easy State – ITNEXT
Recollect
A different way to manage state in React – Hacker Noon
Change detection with Proxy, a simplified version of what MobX does.
React + Backbone/Marionette/Ampersand
Using React components as Backbone Views
clayallsopp/react.backbone
Tutorial: Building React Apps With Flux and Backbone | Toptal
Gentle Migration from Marionette to React - Jamie Gaskins
Integrating React with Marionette
Immutability
Optimizing Performance – React
React Top-Level API – React.PureComponent
Immutable.js
Turbocharge Your React Application with shouldComponentUpdate and Immutable.js
The React.js Way: Getting Started Tutorial | RisingStack
The React.js Way: Flux Architecture with Immutable.js
Immutable.js, persistent data structures and structural sharing – Medium
Building Efficient UI with React and Redux | Toptal
React.js pure render performance anti-pattern – Medium
Pros and Cons of using immutability with React.js - React Kung Fu
Using Immutable.JS with Redux · Redux
Introducing Immer: Immutability the easy way – Hacker Noon
mweststrate/immer: Create the next immutable state by mutating the current one
A Better Way to Handle State with Immer | Bits and Pieces
Freezer
React.js the simple way — Medium
Freezer by Javier Márquez (arqex) provides immutable state and event emitter that can replace Store and Action/Dispatcher. This greatly reduced the boilerplate and make the Flux flow more understandable. Since it is only a immutable state and event emitter, it is extremely flexible. You can adapt it to your style.
It is true that the state will change often. However, the immutability allows for optimization with PureComponent.
arqex/freezer
arqex/freezer-redux-devtools
Using redux devtools without redux - arqex compares design of redux and freezer, and explains the implementation of freezer-redux-devtools
Ticker for State Mutation
Use this to generate a ticker that mutate the state ever second.
And use the above componentDidUpdate() code for monitoring component updates.
const AppContainer = React.createClass({
componentDidMount() {
State.on("update", (obj) => {
this.forceUpdate();
});
State.trigger("test:tick", State.get().tick);
},
});
// reaction.js or state.js
State.on("test:tick", (tick) => {
console.log(`tick: ${tick}`);
State.get().set("tick", tick);
// trigger next tick
tick++;
setTimeout(() => State.trigger("test:tick", tick), 1000);
});Postal
postaljs/postal.js: JavaScript pub/sub library supporting advanced subscription features, and several helpful add-ons.
postal.js Org
Cerebral
Cerebral uses Yomguithereal/baobab, a tree data structure, as its state. It is similar to Freeze.js.
How to improve the data flow in your React app? Introduction to Baobab - React Kung Fu
christianalfoni - Plant a Baobab tree in your flux application
christianalfoni - Handling complex state with Baobab
christianalfoni - Introducing Cerebral
markuplab/catbee: High level framework based on Catberry, Baobab and Cerebral concepts
Reflux
reflux/refluxjs
Deconstructing ReactJS's Flux
The Reflux data flow model
Unstated
jamiebuilds/unstated: State so simple, it goes without saying
Managing State in React With Unstated | CSS-Tricks
- Put state in
Container - Subscribe to
Containerin components
Rematch
uses Redux core, alternative to Redux Toolkit
Rematch | Rematch
Introduction | Rematch
Rematch - a better Redux?