https://github.com/bamlab/react-redux-toolbox
Set of utils for React and Redux development
https://github.com/bamlab/react-redux-toolbox
Last synced: about 1 year ago
JSON representation
Set of utils for React and Redux development
- Host: GitHub
- URL: https://github.com/bamlab/react-redux-toolbox
- Owner: bamlab
- Created: 2017-07-24T19:34:46.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-13T07:38:09.000Z (almost 9 years ago)
- Last Synced: 2025-06-12T21:12:15.339Z (about 1 year ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Redux Utils
## Redux
### API Loaders
#### Saga Decorator
`react-redux-toolbox` exposes a decorator to wrap your saga between two action dispatched.
```javascript
import { addLoader } from 'react-redux-toolbox';
export function* watchFetchMovies(): SagaType {
yield takeLatest(actionTypes.FETCH_MOVIES, addLoader(fetchMovies, 'movies'));
}
```
In the example above,
```javascript
{
type: 'react-redux-toolbox/SHOW_LOADER',
loaderName: 'movies',
}
```
will be dispatched before the action, and
```javascript
{
type: 'react-redux-toolbox/SHOW_LOADER',
loaderName: 'movies',
}
```
just after.
#### Loader reducer
`react-redux-toolbox` also provides a reducer that you can add to your store, which will to the actions dipatched by the Saga Decorator to update your store:
```javascript
import { combineReducers } from 'redux';
import { loaderReducer } from 'react-redux-toolbox';
const rootReducer = combineReducers({
loader: loaderReducer,
...
});
```
**A selector** is also included:
```javascript
export const isLoading = (state: any, loaderName: string, reducerName = 'loader'): boolean
```
#### Automatically change your components into Loaders
When using the saga decorator, with the `loader` reducer added to your store, wrap your components inside a `LoaderWrapper` and a loader will be displayed in their place when the `loaderName` is marked as loading.
```javascript
import { LoaderWrapper } from 'react-redux-toolbox';
...
render() {
return (
)
}
```
### Error handling
`react-redux-toolbox` exposes a decorator to automatically handle common API errors. For instance:
```javascript
import { addLoader, catchApiExceptions as catchApiExceptionsUtil } from 'react-redux-toolbox';
const handleApiException = (error: any) => {
if (__DEV__) console.warn(error);
if (!error.response) {
Toast.show('Connection error');
return;
}
Toast.show('Something bad happened');
};
const catchApiExceptions = (saga, timeout) => catchApiExceptionsUtil(saga, timeout, handleApiException);
export function* watchFetchMovies(): SagaType {
yield takeLatest(actionTypes.FETCH_MOVIES, addLoader(
catchApiExceptions(fetchMovies),
'movies'
));
}
```
## Debug
### Setup React Native debugger
Redirect network calls to the react native debugger:
```javascript
import 'react-redux-toolbox/debug/setupReactNativeDebugger';
```
## Testing
### `getNodeText`
```javascript
import React from 'react';
import { Text, View } from 'react-native';
import { shallow } from 'enzyme';
import { getNodeText } from 'react-redux-toolbox';
describe('getNodeText', () => {
it('returns the sum of the two nodes text', () => {
const component = shallow(
first text
second text
);
expect(getNodeText(component)).toEqual('first textsecond text');
});
});
```