AffX
AffX is a micro state manager heavily inspired by Elm, PureScript, and Redux.
Embracing the Micro Frontends (and Elm) phylosophy, it allows to easily handle state at the Component level, rather than at the application level.
AffX' syntax and concepts being very close from the Redux' ones, it's
very easy to grasp. AffX' update function allows to return "commands"
additionally to the state to perform side effects (such as fetch
, Date
,
etc...), it's therefore strongly adviced to take a look at
TEA if you don't feel confortable
with the concept.
The library is written in TypeScript for more fun and benefits :)
For a complete example see here
Installation
npm install affx
or
yarn add affx
A simple example using React and react-affx
The Actions and State types
// The Action type is defined by AffX
type CounterActions = Action<"INCREMENT"> | Action<"DECREMENT">;
interface CounterState {
counter: number;
}
const initialState: CounterState = { counter: 0 };
The Component
// The WithAffxProps type is available in react-affx
const AffxLessCounter: React.StatelessComponent<
OwnProps & WithAffxProps<CounterState, CounterActions>
> = ({ dispatch, state }) => (
<div>
<button onClick={dispatch.always({ type: "INCREMENT" })}>+</button>
<button onClick={dispatch.always({ type: "DECREMENT" })}>-</button>
<strong>{state.counter}</strong>
</div>
);
// We can now use the withAffx HOC defined by react-affx
// The update function is defined below
const Counter = withAffx(initialState, update)(Counter);
The Update function
// The Update type defined by AffX will enforce the type of our update function
const update: Update<CounterState, CounterActions> = action => state => {
switch (action.type) {
case "INCREMENT": {
return { state: { ...state, counter: state.counter + 1 } };
}
case "DECREMENT": {
return { state: { ...state, counter: state.counter - 1 } };
}
default: {
// AffX will NOT render our React component if no changes have been performed on the state
return { state };
}
}
};
The asynchronous effects (affects)
Where AffX shines is how it handles the side effects. Let's say we want to add a button in our Counter Component that sends the counter state to a Rest API. Depending on the UI framework we use (here React), the solution may be different, but we would have to call an injected service, or an imported function, to handle the asynchronicity ourself, in a somewhat heterogeneous manner, and mostly inside our Component.
Not with AffX:
// We need to add a new Action to our CounterActions type
type CounterActions = ... | Action<"SEND_TO_SERVER">;
// We just add this button in our render method
<button onClick={this.dispatch.always({ type: "SEND_TO_SERVER" })}>
// And finally we may update our "update" function (pun intended)
// ...
case "SEND_TO_SERVER": {
// ajax is defined in the affx-affects library and relies on fetch to perform the requests
const sendToServer = ajax(
"https://www.my-super-rest-api/counters/", // URL
"json", // Method used to decode the Response
{ body: state.counter.toString()}, // Any Fetch options
);
return {
state,
commands: [sendToServer(/* an actionCreator has to be given to sendToServer */)]
};
}
// ...
And voilà!
Additional words
Of course, we may update our state while we send "commands", we therefore may add some "loading" attribute to our state while sending the counter state to the API.
Also, the actionCreator
we pass to sentToServer
will be called once the
Request is over (whether it failed or not), then its result will be pass to the
dispatcher method of our Component. The whole logic disappears from the
Component, however, our update function remains pure!