redux-sugar-store

Redux store sprinkled with some sugar. The "redux-sugar-store" will get all reducers and create a standart actions ({type ..., payload ...}) with the same name. It will create methods in the store so actions can be dispatched directly like plain functions.

(depending on redux)

Install

npm i -S redux-sugar-store

Sample usage:

import sugarStore from 'redux-sugar-store';
import { createStore } from 'redux';

const initialState = {};
const reducers = [
      {
        exampleReducer: (state, action) => state
      }, {
        exampleReducer: (state, action) => state
      }, {
        anotherReducer: (state, action) => state
      }
    ];

const store = sugarStore(createStore, initialState, reducers);
export default store;

Dispatching events

store.exampleReducer(payload);

Using connect

mapStoreToProps - will get a store reference in the ListConnected component. So store.exampleReducer(payload); can be called in the component as it can be called outside.

const ListConnected = connect((store) => ({
  user: store.users
}), store.mapStoreToProps)(List);

Redux Vanila

file: "actions.js"

/*
 * action types
 */
export const EXAMPLE_ACTION = 'EXAMPLE_ACTION';
export const ANOTHER_ACTION = 'ANOTHER_ACTION';

/*
 * action creators
 */
export function exampleAction(payload) {
  return { type: EXAMPLE_ACTION, payload }
}

export function anotherAction(payload) {
  return { type: ANOTHER_ACTION, payload }
}

file: "reducers.js"

import { EXAMPLE_ACTION, ANOTHER_ACTION } from './actions';

/*
 * reducers
 */
function rootReducer(state = initialState, action) {
  switch (action.type) {
    case EXAMPLE_ACTION:
      return state
    case ANOTHER_ACTION:
      return state
    default:
      return state
  }
}

export default rootReducer;

file: "store.js"

import rootReducer from './reducers';
import { createStore } from 'redux'

const store = createStore(rootReducer);

export default store;

Dispatch actions:

import { exampleAction, anotherAction } from './actions';

store.dispatch(exampleAction(payload));