react-state-modules
v1.2.0
Published
A lightweight immutable state management library
Downloads
26
Maintainers
Readme
React State Modules
React State Modules mmakes it simple to connect your React Components to any of your State Modules easily. It provides a convenient mechanism that is meant to work similar to the react-redux
connection pattern. state-modules is an Application State Manager which produces similar effects to using redux
, redux-saga
, reselect
, seamless-immutable
, and redux-saga-process
. However, it is packaged into a very small package with no dependencies (other than those written by and for this project).
// store.js
import createState from "state-modules";
import connectReact from "react-state-modules";
const state = createState().component({
config: { cid: "counter" },
state: {
counter: { value: 0 }
},
actions: {
increment: ["by"],
decrement: ["by"]
},
reducers: {
INCREMENT({ by = 1 }, draft) {
draft.counter.value += by;
},
DECREMENT({ by = 1 }, draft) {
draft.counter.value -= by;
}
}
});
const connector = state.connect(connectReact);
export default connector;
// app.js
import React, { Component } from "react";
import connect from "./store";
class App extends Component {
render() {
const { value, increment, decrement } = this.props;
return (
<div>
<p>Current Value: {value}</p>
<button onClick={() => increment(1)}>Increment</button>
<button onClick={() => decrement(1)}>Decrement</button>
</div>
);
}
}
export default connect(
() => ({ value: "counter.value" }),
actions => actions
)(App);