https://github.com/revathskumar/redux-blackbox
Reduce redux boilerplate by following conventions & creating reducer on the fly
https://github.com/revathskumar/redux-blackbox
redux
Last synced: 2 months ago
JSON representation
Reduce redux boilerplate by following conventions & creating reducer on the fly
- Host: GitHub
- URL: https://github.com/revathskumar/redux-blackbox
- Owner: revathskumar
- License: mit
- Created: 2019-03-23T06:42:37.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:27:01.000Z (over 3 years ago)
- Last Synced: 2025-01-25T16:10:00.392Z (over 1 year ago)
- Topics: redux
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/redux-blackbox
- Size: 113 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: License
Awesome Lists containing this project
README
redux-blackbox
==============
> Reduce redux boilerplate by following conventions
## How to use
#### setup reducer
```js
// reducer/index.js
import { createReducer } from "redux-blackbox";
export default {
users: createReducer("users")
}
```
#### setup actions
```js
// actions/users.js
import { fetchListingAction } from "redux-blackbox";
const fetchUsers = () => {
return axios.get("/users");
}
export const fetchUsersAction = () => {
return async (dispatch) =>{
return await fetchListingAction("users", dispatch, fetchUsers);
}
}
```
#### setup component
```jsx
// components/ListUsers.js
import { IN_PROGRESS, FAILED, SUCCESS } from "redux-blackbox";
class ListUsers extends React.Component {
componentDidMount() {
this.props.fetchUsersAction();
}
render() {
const {users} = this.props;
if (users.uiState === IN_PROGRESS) {
return
Loading...
}
if (users.uiState === FAILED) {
return {users.error.message}
}
if (users.uiState === SUCCESS) {
if (users.listing.length) {
return (
{ users.listing.map(user =>{
return - {user.name}
})
}
)
} else {
return Users list is empty
}
}
return null;
}
}
const mapStateToProps = (state) =>{
return {
users: state.users
}
}
const mapDispatchToProps = {
fetchUsersAction
}
export default connect(mapStateToProps, mapDispatchToProps)(ListUsers);
```
License
-------
Please see [License](https://github.com/revathskumar/redux-blackbox/blob/master/License)