Sate Generator

This module is released in npm as state-generator. Generate over a hundred lines of code with one line, generate all your actions, reducers, sagas and different types of states along with utilities.

Install

npm install --save state-generator

yarn add state-generator

Dependencies

Required Peer Dependencies

These libraries are not bundled with state-generator and required at runtime:

• redux
• redux-saga

Getting Started

Check out the demo app https://github.com/zakred/demo-app-state-generator

Usage

Quick Start

This lib is intended for applications using redux sagas, let's suppose you have your store configuration in a folder src/store, and you create your files for actions, reducers, sagas in src/store/feature. You can make use of this lib and leave all your previous structure and code in place.

• Place your code in a new type of file called gen.js (gen from generated), in this example we will create an action/event that will fetch users from github

src/store/github-users/gen.js

export default [
  // This one line of code will generate all the state functionality that we will subsequently use
  { action: "GET_GITHUB_USERS", worker: () => () => fetch("https://api.github.com/users").then((res) => res.json()) }
]

• Now use it in your component

src/page/github-page/index.js

import {on} from 'state-generator';

const GithubPage = () => {
    
  const onGetGithubUsers = on('GET_GITHUB_USERS');

  return (
    <div>
      <Button onClick={() => onGetGithubUsers.trigger()}>Trigger</Button>
      {onGetGithubUsers.isLoading && <span>Loading...</span>}
      {onGetGithubUsers.isFail && <span>Error... {JSON.stringify(onGetGithubUsers.error())}</span>}
      {onGetGithubUsers.isSuccess && onGetGithubUsers.data().map((user, index) => (
        <div key={index}>
            username: {user.login}
        </div>
      ))}
    </div>
  )
}

"on" States

| Property | Description | | --------------------------- | -------------------------------------------------------------------- | | isLoading | State when action is loading | | isSuccess | State when action was successful | | isRetrying | State when retry is configured and action is retrying due to failure | | isFail | State when action failed | | isNotTriggeredAtLeastOnce() | State when action has never been triggered |

"on" Functionality

| Property | Arguments | Description | | ------------ | ----------------- | ------------------------------------------------------------------------------------------------ | | trigger | payload(optional) | Start/Run the worker | | reset | timeout(optional) | Reset the event status, optionally can be passed a time in milliseconds to wait before resetting | | status | | Return the current status | | error | | Error object returned from worker | | data | | Data returned from worker | | retryAttempt | | If retry is set, this will give the number of retry attempt |

Configuration

You need to set your gen files to your store, to do this configure the reducer and saga.

src/reducers

import feature1Gen from "./feature1/gen";
import feature2Gen from "./feature2/gen";

const rootReducer = combineReducers({
  ...getReducers(feature1Gen, feature2Gen),
});

export default rootReducer;

src/sagas

import feature1Gen from "./feature1/gen";
import feature2Gen from "./feature2/gen";

export default function* rootSaga() {
  yield all([...getSagasFork(feature1Gen, feature2Gen)]);
}

src/store

import {createStore, applyMiddleware, compose} from "redux";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./reducers";
import rootSaga from "./sagas";
import {setStore} from "state-generator";

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  compose(applyMiddleware(sagaMiddleware)),
);
sagaMiddleware.run(rootSaga);

// This is the relevant line of this example
setStore(store);

export default store;

IMPORTANT

Notice the double arrow in the worker. () => () =>

src/store/feature/gen.js

const myWorker = (payload) => () => {
  // my code
};

This is equivalent to:

function myWorker(payload) {
  return function () {
    // my code
  };
}

Payloads

To pass data to your worker simply add to your worker the parameter

src/store/feature/gen.js

const myWorker = (payload) => () => {
  return post(payload);
};

export default [
  {action: 'MY_ACTION', worker: myWorker}}
]

src/page/mypage/index.js

import {on} from "state-generator";

const Component = () => {
  const payload = {id: 1, name: "my payload"};
  on("MY_ACTION").trigger(payload);
};

Async function

You can make your worker async

src/store/feature/gen.js

const myAsyncWorker = () => async () => {
  let result = 0;
  result += await asyncOperation();
  result += await asyncOperation();
  return result;
};

export default [
  {action: 'MY_ACTION', worker: myAsyncWorker}}
]

Polling

To poll every X time, pass the pollEvery with the value being milliseconds as the interval

• This example polls every 5 seconds

src/store/feature/gen.js

export default [
  {action: 'MY_ACTION', worker: myWorker, opts: {pollEvery: 5000}}}
]

Retry

To retry X times, pass the retry object with the value of times you want to retry

• Retry for 5 times

src/store/feature/gen.js

export default [
  {action: 'MY_ACTION', worker: myWorker, opts: {retry: {times: 5}}}}
]

Retry object

| Property | Default | Description | | ----------- | ------- | --------------------------------------------------------------------------------- | | every | 1000 | Interval to wait before retrying | | times | 0 | How many times to retry | | max | 60000 | Maximum time allowed in milliseconds to wait for a retry | | exponential | true | Every time it retries the time to wait between will be incremented exponentially | | jitter | true | Makes the retry random given the max value, retry attempt and exponential setting |

License

MIT