Package Exports

redux-friends

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-friends) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 with I maintain too, a CLi to generate a redux folder based on this library.

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

Installation

npm install redux-friends

yarn add redux-friends

Types

In constants.js

import { createTypes } from 'redux-friends';

export const REDUCER_KEY = 'someData'
// 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, 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

import { createStore } from 'redux-friends';

const isReactNative = !!'are you using RN ?'

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

export const { store, persistor } = createStore(rootReducer, middlewares = [], isReactNative = false);

( note that middlewares and isReactNative are optionnal args which default values are indicated above )

For now, redux-persist, redux-thunk are injected in any case, but you can still use only the store object from the function call.

PRs are welcome to remove this opiniated part as optionnal config

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 :

( 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 :

check if all dependencies are required or if a map is possible between externals packages and selected helpers from this package
create more helpers for reducers ( CRUD for collection )