Flow Manager System Base
npm install redux-flow-manager
bash
npm install --save redux-flow-manager
`
Usage
Check out the the example in the files app.ts and flowManger.browser.ts in the test folder.
Step 1: Add the flow manager reducer to your project.
`jsx
import { combineReducers } from 'redux';
import { flowManagerReducer } from 'redux-flow-manager';
const rootReducer = combineReducers({
flowManager: flowManagerReducer
});
...
`
Step 2: Create Steps Configuration file - steps config define the set of steps for each sub flow types.
(config files properties are explained below. Steps Configuration
Step 3: Create Flows Configuration file - flow config file define the sub flow types name and the conditions that should be success to make this sub flow valid.
(config files properties are explained below. Flows Configuration
Step 4: Call CreateFlowManagerAPI with your store, reducer slice name, flows configuration and steps configuration.
( more details of how configuration should be look like will explain later )
`jsx
// ./index.js
import store from './store';
import CreateFlowManagerAPI from 'redux-flow-manager';
export default CreateFlowManagerAPI(store, 'flowManager', flowsConfig, stepsConfig);
`
Step 5: CreateFlowManagerAPI return an instance of Flow Manager with functionality that will help you manage flows in your app.
`jsx
// ./SomeComponent.jsx
class App extends SomeComponent {
// will set teh main flow type when clock on button
render() {
return (
);
}
}
`
`jsx
// ./OtherComponent
class App extends OtherComponent {
// get the next step
const nextStep = flowManagerAPI.getNextStep();
render() {
return (
);
}
}
`
Store Structure
`ts
interface FlowManagerState {
flowType: string;
subFlowTypes: Array;
currentStep: string;
nextStep: string;
steps: Array;
}
`
Initial Flow Manager
$3
Create new instance of flow manager.
All the API methods of flow manager describe below.
##### arguments:
| Property | Type | Required | Default | Description |
|:--------------|:--------------|:--------------|:--------------|:--------------|
| store | object | Required | undefined | Pass in the redux store. |
| sliceName | string | Required | undefined | the name of the reducer slice |
| flowsConfig | SubFlowsConfig | Required | undefined | Flows Configuration) |
| stepsConfig | StepsConfig | Required | undefined | Steps Configuration) |
| nestedSlice | string | Optional | undefined | Set the flow manager data under specific nested slice in the store |
Start and End Flow
$3
Start flow is used when your app should initial the main flow type in the store.
That flow type represent a set of sub flow types in your Flows Configuration
##### arguments:
| Property | Type | Required | Default | Description |
|:--------------|:--------------|:--------------|:--------------|:--------------|
| flowType | string | Required | undefined | The flow type that represent a set of sub flow types Flows Configuration |
| currentStep | string | Required | undefined | Initial specific step by start the flow instead of the first step that define in steps array |
| autoUpdate | boolean | Optional | undefined | Optionally pass indicate to automatic run state machine calculator to calculate the flow information data for any change in store |
| debounceTime | boolean | Optional | undefined | Optionally pass indicate how many time to bounce between auto updates |
$3
End the flow. Clear all the data from flow manager.
##### arguments:
None
Steps Actions
$3
Update Information running the state machine to calculate the sub flows condition and update the steps information and sub flows.
NOTE: If you call startFlow with autoUpdate true, this method invoke automatic for every change in store.
This is very useful for auto calculation nd update your component automatic without worry when to call to updateInformation.
##### arguments:
None
$3
Next Step method update the current step with the next step and the next step with the new next step
return the next step value.
NOTE: To Promise last updated result, call to updateInformation before.
##### arguments:
| Property | Type | Required | Default | Description |
|:--------------|:--------------|:--------------|:--------------|:--------------|
| step | string | Optional | currentStep | Optional to pass the step move to. by default it move to the next step according to steps array.
$3
Return if the current step is the last step.
NOTE: To Promise last updated result, call to updateInformation before.
##### arguments:
None
Selectors
Each Selector return the corresponding value from the store.
NOTE is not recommended to use directly with selector.
Use Step Actions async methods to get the most updated result before navigate to next step for example.
- getFlowType()
- getSubFlowTypes()
- getCurrentStep()
- getSteps()
- getNextStep()
$3
Flows Config is an array of object, that each object define the sub flow that may be in your entire application.
Each flow object have conditions array taht each condition include callback.
that callback can check anything related to the condition, if the condition you check is success then return resolve, if the condition is failed then return reject.
If all conditions of a sub flow pass, then this sub flow added to the subFlowTypes array
Flow Object Properties:
- flowName: string - unique name of the sub flow type
- runInFlowTypes: array - define lise of main flowTypes that this set of conditions will run in
- conditions: array - an array of Condition Object
- conditionName: string - the name of the condition
- onCheck: function - a promise function that return resolve when the condition success and reject if the condition should be failed
- mandatory: boolean - optional property. define if to remove that sub flow from the array if this condition failed. true by default.
Each Condition function get in props:
- state - the current state in the store.
- context - the current context in the state machine.
- event - the state machine event who invoke that condition
NOTE The Order of the Flow Objects in the array are matter.
The checks will run by that order.
`js
const flowsConfig = [
{
flowName: 'planOnlyFlow',
conditions: [
{
conditionName: 'conditionA',
onCheck: conditionA
},
{
conditionName: 'conditionB',
onCheck: conditionB,
mandatory: false
}
]
},
{
flowName: 'onlyAccessoryFlow',
runInFlowTypes: ['COP'], // this onlyAccessoryFlow check will run only for main COP flowType
conditions: [
{
conditionName: 'conditionC',
onCheck: conditionC
},
{
conditionName: 'conditionD',
onCheck: conditionD
}
]
},
{
flowName: 'changePlanFlow',
runInFlowTypes: ['CHQ'],
conditions: [
{
conditionName: 'conditionA',
onCheck: conditionA
},
{
conditionName: 'conditionD',
onCheck: conditionD
}
]
}
];
`
$3
Steps configuration define for each flow and sub flow, the set of steps that the user need to complete in your application.
Step Object Properties:
- key: flowType (Example: COP) - the key represent the flowType
- key: subFlowType (Example: planOnlyFlow) - represent the subFlowType
- stesp: array - set of steps for this flowType and subFlowType
NOTE The Order of the Sub flow Objects in the object are matter.
The checks will run by that order.
For example: if you put planOnlyFlow before planOnlyFlow,changePlanFlow, then planOnlyFlow always wil be set before planOnlyFlow,changePlanFlow.
`js
const stepsConfig = {
COP: {
onlyAccessoryFlow: {
steps: [
'STEP_A',
'STEP_B',
'STEP_C',
]
}
},
CHQ: {
'planOnlyFlow,changePlanFlow': {
steps: [
'STEP_R',
'STEP_T',
'STEP_X',
]
},
planOnlyFlow: {
steps: [
'STEP_B',
'STEP_C',
'STEP_D',
]
},
changePlanFlow: {
steps: [
'STEP_A',
'STEP_D',
'STEP_E',
]
}
}
};
``