Honestica-Redux Utils

Redux, without the boilerplate

Redux is a predictable state container for JavaScript apps. It's all about developer experience, but its boilerplate can be quite heavy. Honestica-Redux utils provide an attempt to reduce the pain and focus on meaningful code.

Here are some libraries ont top of which Honestica-Redux utils is built:

• Redux-Act to facilitate action creation
• Redux-Loop, A library that ports Elm's effect system to Redux
• Axios to make http calls
• Lodash because what could we do without lodash ?

Example

The lib is pretty tiny, to get a grip of how it works, look at the source code or in the example folder. Here's a snippet of how it should be used:

// Typings for the state
interface Counter {
 current: number,
 previous: number,
 name: string
}

// Initial state
export const initState = {
 current: 0,
 previous: 0,
 name: 'Number of kickdrums'
};

/**
* Create reducer with state type `Counter`
*/
export const reducer : ActReducer<Counter> = createReducer({}, initState);

const { on, onFetch } = reducer;

/**
* Simple action
*/
export const INCREMENT = on<number>('INCREMENT')((state, increment) => {
 return [ Object.assign(state, { current: state.current + increment }) ];
});

/**
* Async action: server, method, url, data are specified when dispatching action
* @type `number` is the type of response.data
*/
export const FETCH_CURRENT = onFetch<number>('INCREMENT')({
 success: (state, response) => {
   if (response.data > 1) {
     return [ Object.assign(state, { current: response.data }) ]
   }
   return [ state ];
 },
 failure: (state, error) => [ state ]
});

/**
* Sample call to an action => no need to create a task !!
*/
FETCH_CURRENT({ method: 'post', server: 'axios', data: { coucou: 'hello' }, url: '/coucou', config: {
 headers: {
   Accept: 'application/json'
 }
} });