@sygnalgroup/react-sg-modules
v1.6.0
Published
Module to facilitate redux sagas and redux configurations with async request with expo
Downloads
3
Maintainers
Readme
react-sg-modules
Easy way to handle react-redux with redux-sagas and reduxsauce
With this package you can easily configure and use react-redux with redux-sagas, you can also use the pact without integrating your requests, it can only be used as a store
Example use in a crud
Install
npm i @sygnalgroup/react-sg-modules
Usage/Examples
If you will use async requests, can set the api base url from in setApiBaseUrl method.
import { setApiBaseUrl } from '@sygnalgroup/react-sg-modules';
setApiBaseUrl(BASE_URL_API);
Customize the api auth keys - this keys the lib auto persist in the headers and always update.
DEFAULT API AUTH KEYS - ['uid', 'access-token', 'expiry', 'client'];
If you want costumize the headers keys, you need export authHeaders from modules/index.js in your project
const authHeaders = ['uid', 'access-token', 'expiry', 'client'];
export { authHeaders };
The lib use localStorage to save the keys and use in the request headers, if you want set manually the keys, use the method to persist in local storage
import { persistData, removeData, retrieveData } from '@sygnalgroup/react-sg-modules';
Provider
import { Provider } from '@sygnalgroup/react-sg-modules';
<Provider>
<App />
</Provider>
MODULES
CREATE MODULE - TODO
todo/index.js
import api from 'core/api';
export const todoModule = 'todo';
const actions = {
getTodoList: {
api: () => api.get('/todo'),
action: {
error: ['error'],
success: ['data'],
},
*sagas(Creators, { params }) { // OPTIONAL METHOD - THE DEFAULT CALL (SUCCESS OR ERROR)
try {
const resp = yield call(actions.getChannels.api);
yield put(Creators.getTodoListSuccess(resp.data));
} catch (error) {
yield put(Creators.getTodoListError(getErrorMessage(error)));
}
},
state: { // STATES TO CHANGE IN REDUCERS ACTIONS
start: { loadingTodoList: true },
error: { loadingTodoList: false },
success: { loadingTodoList: false },
},
isTakeEvery: true, // IF YOU WANT ALWAYS EXECUTE THE REQUEST, OTHER WISE WILL CANCEL DUPLICATED REQUESTS, DEFAULT=FALSE
},
};
export default {
actions,
state: { // ALL STATES FROM THE MODULE
loadingTodoList: false,
data: [],
},
};
OR
import api from 'core/api';
export const todoModule = 'todo';
const actions = {
getTodoList: {
api: () => api.get('/todo'),
action: {
error: ['error'],
success: ['data'],
},
},
};
export default {
actions,
state: {
data: [],
},
};
Create a file in src/modules/index.js and import the modules
modules/index.js
import todo from './todo/index';
const Modules = {
todo,
};
export default Modules;
USAGE ACTIONS AND SELECTORS
import React, { useEffect } from 'react';
import Modules from 'modules';
import useActions from 'modules/map/useActions';
import useSelectors from 'modules/map/useSelectors';
import { todoModule } from 'modules/todo';
const TodoList = () => {
const { dispatch } = useActions();
const data = useSelectors(todoModule, 'data');
const load = () => {
dispatch({
action: Modules.todo.actions.getTodoList,
data: {},
options: {
onSuccess: () => {},
onError: () => {},
},
});
};
useEffect(() => {
load();
}, []);
return <div>{data && data.map((item) => <div>{item.name}</div>)}</div>;
};
export default TodoList;
EXPORT MODULES
export {
Provider,
history,
useActions,
useSelectors,
ReducersProvider,
api,
axios,
retrieveAuthHeaders,
persistData,
removeData,
retrieveData,
clearAuthHeaders,
setApiBaseUrl,
ReactReduxContext
}
If you want add moddlewares in redux store you can add this method storeMiddlewares in your modules.js, this method must return a array
the package will import this function from your project and add the middlewares in the store.
EXAMPLE - routerMiddleware from connected-react-router
export const storeMiddlewares = (history) => [routerMiddleware(history)];
USE MODULE WITHOUT REQUESTS - REDUX STORE MODULE
EXAMPLE app.js module
export const appModule = 'app';
const actions = {
setTitle: {
action: {
success: ['title'],
},
},
};
const app = {
actions,
state: {
title: 'My App',
},
}
export default app;
USAGE
const { dispatch } = useActions();
const title = useSelectors(appModule, 'title');
useEffect(() => {
dispatch({
action: Modules.app.actions.setTitle,
data: 'Posts Title'
})
}, [dispatch]);
License
MIT © sygnalgroup