@suddenly/flux
A simple implementation of Flux that is loosely based on Redux.
Usage
Actions
You can pass actions directly or return a function that will dispatch actions asynchronously.
When using a function you get dispatch
and getState
functions as arguments.
const ItemActions = {
LOADING_ITEMS: "LOADING_ITEMS",
LOADED_ITEMS: "LAODED_ITEMS",
loadedItems(items) {
// Return a literal action to dispatch it
return { type: ItemActions.LOADED_ITEMS, payload: items };
}
loadItems() {
// Return a function to defer dispatching actions
return (dispatch, getState) => {
// getState() returns the current base state
if (getState().getIn(["Items", "isLoading"])) return;
dispatch({ type: ItemActions.LOADING_ITEMS });
fetch("/items").then(items => {
// You can dispatch other actions
dispatch(ItemActions.loadedItems(items));
});
}
}
}
Reducers
Reducers work similar to Redux but utilise Immutable.js by default.
import { createState, createReducer } from "@suddenly/flux";
import ItemActions from "../actions/ItemActions";
// createState is a convenience wrapper for Immutable.fromJS()
const initialState = createState({
isLoading: false,
all: []
});
export default createReducer(initialState, {
[ItemActions.LOADING_ITEMS](state, action) {
return state.set("isLoading", true);
},
[ItemActions.LOADED_ITEMS](state, action) {
return state.merge({
isLoading: false,
all: createState(action.payload)
});
}
});
You can also pass an optional sideEffect
function as the third argument to createReducer
that will be called (passing the updated state) once all reducer functions are called.
And then you might combine your reducers:
import { combineReducers } from "@suddenly/flux";
import Items from "./ItemReducer";
import Other from "./OtherReducer";
export default combineReducer({
Items,
Other
});
This will create a tree structure with each reducer managing the state under the same key in the store.
In this example, the store would look something like:
{
Items: {
isLoading: false,
all: []
},
Other: {
...
}
}
You can also pass a sideEffect
function as the second argument to combineReducers
. This function will be called with the updated state once all reducers are run.
You can then use this new reducer as context state in a Provider
.
Context
First, create a store:
import { Store, createState } from "@suddenly/flux";
import reducer from "./reducers";
const initialState = createState({
...
});
export new Store(initialState, reducer);
Then create a Provider
at the top level of your app to provide state.
For example, in your App.tsx
:
import { Provider } from "@suddenly/flux";
import store from "../store";
export default (props: Props) => {
return <Provider store={store}>...</Provider>;
};
And now you have a choice of how you want to consume the context - hooks or HOCs.
Hooks
You can use useSelector
and useDispatch
to hook into the state and actions of the provider.
import { useSelector, useDispatch } from "@suddenly/flux";
import ItemActions from "../actions/ItemActions";
export default () => {
// Note: this can be simplified further but is meant to be a
// comparison to the HOC example down futher
const { items } = useSelector(state => ({
items: state.getIn(["Items", "all"])
}));
const dispatch = useDispatch();
return (
<div>
{items.map(item => {
return (
<div>
{item.get("label")}
<button onClick={e => dispatch(ItemActions.actionItem(item))}>Action</button>
</div>
);
})}
</div>
);
};
HOCs
You can use connect
to create a HOC that maps state and dispatch calls into the wrapped component.
import { connect } from "@suddenly/flux";
import ItemActions from "../actions/ItemActions";
interface Props {
//...
}
export const ItemList = (props: Props) {
return (
<div>
{props.items.map(item => {
return (
<div>
{item.get("label")}
<button onClick={e => props.actionItem(item)}>Action</button>
</div>
)
})}
</div>
);
}
function mapStateToProps (state, ownProps) {
return {
items: state.getIn(['Items', 'all'])
};
}
function mapDispatchToProps (dispatch, ownProps) {
return {
actionItem(item) {
dispatch(ItemActions.actionItem(item));
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ItemList);
Contributors
- Nathan Hoad - nathan@nathanhoad.net