redux-smart-state

This library is intended to simplify using redux in a react application by making it quick to add new items in the state store and easy to manage sagas. If you want to add a new item into the state, you only need to add it into the initial state and the SmartState will automatically add a reducer and action creator and selector to get and set the value. If needed you can also create more complex reducers.

It is also easier to hook up action creators and action handlers for sagas.

Set up

Installation:

npm i redux-smart-state

Set up the root reducer, app/modules/rootReducers.js, with the modules you want to use and set up the SmartState:

const { SmartState }= require('redux-smart-state');
import languageModule from "./language";
import timeoutModule from "./timeout";

const rootState = {
  language: languageModule.state,
  timeout: timeoutModule.state,
  transaction: transactionModule.state
};

export let smartState = new SmartState("root", rootState);
const rootReducer = smartState.getReducers();

export default rootReducer;

Set up root sagas, app/modules/rootSagas.js:

import { all } from "redux-saga/effects";
import prestartupModule from "./pre-startup";
import timeoutModule from "./timeout";
import transactionModule from "./transaction";

export default function* rootSaga() {
  yield all([...timeoutModule.sagas, ...transactionModule.sagas]);
}

Create the module states, for example app/modules/transaction/state.js

const { SmartState }= require('redux-smart-state');
import attachSelectorsToState from "./selector";

/* ------------- Initial State ------------- */

export const INITIAL_STATE = {

    transferFee: 0,
    sellRate: null
};

const transaction = new SmartState("transaction", INITIAL_STATE, null, null);

export default attachSelectorsToState(transaction);

In action handlers you can then set and get the value easily, for example:

// app/modules/transaction/sagas/actionHandlers.js

import { call, cancelled, put, select, take } from "redux-saga/effects";
import transactionState from "../state";

export function* scan_QR_code() {
  // do some stuff

  // you can get and set the values from state
  yield put(transactionState.pendingTransaction.sellRate.setValue(null));
}

You can also get the value for screens:

// on some screen:
import transactionModule from "../../../modules/transaction/index";

const mapStateToProps = createStructuredSelector({
  sellRate: transactionModule.state.pendingTransaction.sellRate.getValue()
});

const mapDispatchToProps = dispatch => {
  return {
    scanQRCode: () => dispatch(transactionModule.sagaActionCreators.scan_QR_code())
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SomeScreen);

This is what the transactions/index.js looks like:

import sagaActionCreators from "./sagas/actionCreators";
import sagas from "./sagas";
import state from "./state";

export default { sagas, sagaActionCreators, state };

And transactions/sagas/index.js:

import { takeLatest, takeEvery } from "redux-saga/effects";
import * as actionHandlers from "./actionHandlers";
import sagaActionCreators from "./actionCreators";

export default [
  takeLatest(sagaActionCreators.scan_QR_code.type, actionHandlers.scan_QR_code),
  ... (more stuff)
];

app/modules/transaction/sagas/actionCreators.js

const { createStructuredActionCreators }= require('redux-smart-state');

const sagaActionCreators = createStructuredActionCreators("sagas/modules/transaction", {
  scan_QR_code: null,
  on_sell_amount_confirmed: ["cashAmount", "coinAmount"]
});

export default sagaActionCreators;

You should add each action declared in actionHandlers into the actionCreators. You can declare any saga actions in the actioncreators, for example:

Usage

Once the initial set up is done, you can add a field in the INITIAL_STATE of any module state, and you will be able to get and set the value with getValue() and setValue( value ) functions.

If the field in the state is an array, you can add, update or delete list items.

addItem( item_to_add ) This adds the object passed in into the array.

updateItem( data_to_update, functionFindObjectToUpdate ) The first parameter should be what data of the object in the array needs to be updated. The second parameter is a function that should identify the object in the array to update by returning true when the condition is checked for each object. For example: yield put(orderState.orderedProducts.updateItem({quantity: existingOrder.quantity + 1}, item => item.id === orderItem.id));

deleteItem( functionToFindItem ) The parameter should be a function to find the correct object in the array to delete by returning true when the condition is checked for each item. For example, yield put(orderState.orderedProducts.deleteItem(item => item.id === orderId));