redux-friends v4.0.5

Purpose

Redux-friends is a set of helpers designed to remove at its best the verbose part of redux use. It is therefore opiniated on the declaration part, by trying to let you declare only what you can't avoid.

This package is designed to work with reduxifire which I maintain too, a CLi to generate a redux folder based on this library's helpers.

See below the example section for a redux implementation using redux-friends

Installation

npm install redux-friends

or

yarn add redux-friends

Types

In constants.js

import { createTypes } from 'redux-friends';

export const REDUCER_KEY = '<some key like forms>'
// used in reducer , see below
export const LOADED = 'loaded';
export const DATA = 'data';

const MyTypesArray = [SET_LOADED, SET_DATA];

export const TYPES = createTypes(REDUCER_KEY, MyTypesArray);

return an object of actions in the form

{ [ACTION_NAME]: `${REDUCER_KEY}/${ACTION_NAME}`}

to target an action (in the reducer part), or declare an action function ( through the createAction helpers), we can declare

TYPES[ACTION_NAME]

( see action/reducer example below )

createTypes rests on redux-types, which I collabored on, and is included here to keep harmony in the package API

Actions

in actions.js

import { createAction, createActionWithMeta } from 'redux-friends';
import { SET_LOADED, SET_DATA, TYPES, LOADED, DATA} from './constants';
// will return a function which accepts a payload argument only
export const setLoaded = createAction(TYPES[SET_LOADED]);
// will return a function which accepts payload and meta arguments
export const setLoadedWithMeta = createActionWithMeta(TYPES[SET_LOADED]);

setLoaded will return :

payload => ({
	payload: payload,
	type: '<injected type with createAction>'
});

setLoadedWithMeta will return :

 (payload, meta ) => ({
	payload: payload,
	meta: meta,
	type: '<injected type with createActionWithMeta>'
});

mapStateToProps

const mapStateToProps = createMapStateToProps({
	formValues: getFormValues,
	loginError: getLoginError,
});

is equivalent to

const mapStateToProps = state => ({
	formValues: getFormValues(state),
	loginError: getLoginError(state),
});

mapDispatchToProps

export const mapDispatchToProps = createMapDispatchToProps({ onLogin: login });

is equivalent to

export const mapDispatchToProps = dispatch => bindActionCreators({ onLogin: login }, dispatch);

Reducer

import { createReducer } from 'redux-friends';
import { SET_LOADED, SET_DATA, TYPES, LOADED, DATA } from './constants';

const defaultState = {};

const behaviors = {
	[TYPES[SET_LOADED]]: (state, { payload }) => ({ ...state, [LOADED]: payload }),
	[TYPES[SET_DATA]]: (state, { payload }) => ({ ...state, [DATA]: payload }),
	// variant if action is created with createActionWithMeta
	[TYPES[SET_LOADED]]: (state, { payload, meta }) => ({ ...state, [LOADED]: payload, someOtherKey:meta }),

};

export default createReducer(behaviors, defaultState);

Store

There are two createStore exposed in this package. Both embed redux-devtools and redux-thunk middleware.

The first : has only features described above.

import { createStore } from 'redux-friends';


const middlewares = ['whatever middlewares you want'];

export const store = createStore(rootReducer, ?middlewares );

( note that middleware argument is optional argument )

The second one embed redux-persist. Redux-persist being treated as external dependency in the lib, you'll have to install it on your project.

import createStore from 'redux-friends/build/createPersistedStore.js';


const middlewares = ['whatever middlewares you want'];

export const { store, persistor } = createStore(rootReducer, ?middlewares );

( note that middleware argument is optional argument )

:warning: In this case, createStore is the default export, so use default import ;)

( the reason being that since this file relies on special dependencies that the rest of the lib does not require, it is treated as a separate bundling process, hence the import path )

Reducer Helpers

Since reducers are often designed to manage the same data structures, here is a list of helpers to minimize the declaration part to achieve same goals.

I mostly design atomic reducers, where state is the value of the reducer key. ( yes that implies doing a massive use of combineReducers ^^, which is a good design in my opinion )

( equivalences in reducer behaviours)

addPayloadToState

usefull to add an item in a collection for example

const behaviors = {
	[TYPES[ADD_ITEM]]: addPayloadToState,
};

is equivalent to :

const behaviors = {
	[TYPES[ADD_ITEM]]: (state, { payload }) => [...state, payload],
};

addPayloadToKey

const behaviors = {
	[TYPES[SET_LOADED]]: addPayloadToKey(LOADED),
};

is equivalent to :

const behaviors = {
	[TYPES[SET_LOADED]]: (state, { payload }) => ({
	...state,
	[LOADED]: payload,
});

addPayloadToNestedKey

const behaviors = {
	[TYPES[SET_PROFIL_NAME]]: addPayloadToNestedKey(PROFIL, NAME),
};

is equivalent to :

const behaviors = {
	[TYPES[SET_PROFIL_NAME]]: (state, { payload }) => ({
	...state,
	[PROFIL]: {
		...state[PROFIL],
		[NAME]: payload,
	},
});

assignPayloadToState

const behaviors = {
	[TYPES[SET_IS_ONLINE]]: assignPayloadToState,
};

is equivalent to :

const behaviors = {
	[TYPES[SET_IS_ONLINE]]: (state, { payload }) => payload
};

spreadPayloadToState

const behaviors = {
	[TYPES[PATCH_PROFIL]]: spreadPayloadToState,
};

is equivalent to :

const behaviors = {
	[TYPES[PATCH_PROFIL]]: (state, { payload }) => ({
	...state,
	...payload,
});

roadmap :

• create more helpers for reducers ( CRUD for collection )