https://github.com/nitor-infotech-oss/react-command-reducer
React-Redux Command Reducer
https://github.com/nitor-infotech-oss/react-command-reducer
Last synced: 6 months ago
JSON representation
React-Redux Command Reducer
- Host: GitHub
- URL: https://github.com/nitor-infotech-oss/react-command-reducer
- Owner: nitor-infotech-oss
- Created: 2018-10-25T12:20:42.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T21:02:54.000Z (almost 3 years ago)
- Last Synced: 2025-02-01T09:22:25.267Z (8 months ago)
- Language: JavaScript
- Size: 1.57 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RxJS with React and Redux
This is a sample application which uses capabilities of RxJs (reactive programming) with React and Redux.
## Command Reducer
Application uses Command Reducer pattern for Redux Store implementation
```javascript
const threadReducer = commandReducer.add(
threadActions.getThread,
threadCommands.getThread,
ActionTypes.GET_THREAD
);
```
This help you to write clean and decoupled implementation of action dispatcher for redux store.
When you register an `action` you also specify the corresponding `command` to execute when the action is dispatched. This also address side effects using `Redux Observables`
## Tech stack
* ReactJS
* Redux
* Redux Observables
* RxJs
* Bootstrap
# Command Reducer
Following utility class help us to maintain command reducer mapping
```javascript
export default class CommandReducer {
constructor(initialState) {
this.initialState = initialState;
this.map = [];
}
add(action, command, type) {
this.map.push({ action, command, type });
return this;
}
reducer() {
return this._reducer;
}
_reducer = (state, action) => {
if (typeof state === 'undefined') {
state = this.initialState;
}
return this.map.reduce((prevState, mapping) => {
if (action.type === mapping.type) {
return mapping.command(prevState, action.payload);
} else {
return prevState;
}
}, state);
};
}
```