React/Redux utility to create flows that acts as Actions and Reducers with Typescript and Decorators.
Work in Progress:
Core functionalities: done
Actions dispatchers: done
Reducer handlers: done
Triggers handlers: done
Promise based events: done
Http-Promise based events: done
Tests: TBD
Requirements
# requires the following packages:
npm i --save react-redux
npm i --save rxjs
npm i --save axios
npm i --save-dev @babel/plugin-proposal-decorators
npm i --save-dev @babel/plugin-proposal-class-properties
Install
# install Flow Mapper
npm i redux-flow-mapper
Setup tsconfig and babelrc
Include support for decorators in the tsconfig.json file:
{
"compilerOptions":{
...
"experimentalDecorators":true,
"emitDecoratorMetadata":true
}
}
If Babel is used to transpile the application, include the plugins below in the .babelrc file. Consider these itens as firts in the plugins list and in the same order that appears below:
This package is based in the common flow principles to control the activities in the frontend.
Any action of flow is build on FlowMapper and React just render the results.
The base flow of FlowMapper starts with flow actions and states, are intercepted by triggers, encapsulated with modules, created by mapper and distributed thru connections:
Redux by Class and Decorators
All Redux logics were designed to be a decorated classes and methods.
FlowState
The development starts with states, that is the initial data for reducers.
import{FlowState}from'redux-flow-mapper';
@FlowState({
name:'name-of-your-state'
})
exportclassMyState{
myCustomData='';
...
}
The name in the decorator, will be used as reducer name in redux store.
FlowActions
Actions are designed to be dispatchers and reducers.
Any method decored by getState will be replaced by dispatcher function that emits an action with the name of method as type and the arguments as args in the dispatch.
Modules are encapsulation that holds all flow states and actions.
import{FlowModule}from"redux-flow-mapper";
@FlowModule({
states:[MyState],
actions:[MyActions,MyAnotherActions]
})
exportclassMyModule{}
FlowMapper
The FlowMapper is the main class and instantiate all actions and states, transforming then in dispatchers and reducers.
import{FlowMapper}from"redux-flow-mapper";
exportconstmyMapper=newFlowMapper({
devExtension:true,// enables redux-dev-extension for chrome
modules:[MyModule]
});
Connecting in React
Use Redux Provider and connect it to the mapper store:
import{Provider}from'react-redux';
import*asReactfrom'react';
...
exportclassAppextendsReact.Component{
publicrender(){
return(
<Providerstore={myMapper.createStore()}>
...
</Provider>
);
}
}
The function createStore instantiate a Store object, that can be used in the redux Provider.
Render in component
Use FlowConnection to replace connect from Redux. This decorator automatically connect the component to the redux store and instantiate actions and states from mapper.
<p>custom data = {this.props.stateContent.myCustomData}</p>
<p>
<buttononClick={this.start}>Start</button>
</p>
</div>
);
}
start=()=>{
this.props.actions.start();
};
}
Tools
FlowPromised
These Actions are designed to be a Promise based template.
The FlowMapper will generate the action dispatchers as loading, completed and failed.
The promise handle function will be replaced by dispatcher and the Promise will output the methods above for each Promise event.
The FlowHttpState is based in the same event handler FlowPromised (loading, completed and failed), bu the response returns and AxiosResponse or AxiosError depending the handler.
The object handling can be defined as example below. All Axios responses will be stored in the properties response or error.