simplify-redux-app
v0.2.1
Published
Library for simplify redux
Downloads
15
Maintainers
Readme
🐒 Simplify redux ap
Simplify redux app (SRA) is the modern and lightweight (less than 2 kb) toolkit that will simplify your work with redux. SRA allows you to forget all pain with actions, constants, reducers, moreover, it is fully compatible with existing code.
The library is actively used and developed, so if you have any questions welcome! 👋
📦 Installation
To use SRA in your project, install it via npm:
npm i simplify-redux-app
or by yarn:
yarn add simplify-redux-app
then create module
import { simplifyBuilder } from 'simplify-redux-app';
// create builder that will handle all the work
const builder = simplifyBuilder(state, existReducers);
// create reducer that will be used by redux
const reducer = builder.getReducers()
more cool example can be found below
✨ Features
SRA allows you to create actions that can be used to dispatch data to your store. Here is an example of these actions:
import { simplifyBuilder } from 'simplify-redux-app';
export interface ITodoState {
items: string[];
}
export const todoState: ITodoState = {
items: ['test'],
};
// init builder from the library
const builder = simplifyBuilder(todoState, {});
// example how to create simple redux action
const addTodoItem = builder.createReduxAction((test: string) => ({
name: 'ADD_TODO_ITEM',
updater: (state) => ({
...state,
items: [...state.items, test],
}),
}));
// example how to send a server request
const loadTodoItemById = builder.createServerAction((id: string) => ({
name: 'LOAD_TODO_ITEM_BY_ID',
url: 'https://jsonplaceholder.typicode.com/todos/' + id,
method: httpMethod.get,
updater: (state, payload: APITodoItemResponse) => ({
...state,
items: [...state.items, payload.title],
}),
}));
// create reducer for redux
export const rootReducer = combineReducers({
todo: builder.getReducers(),
});
// create store
export const store = createStore(rootReducer);
for the simple redux store update you can use createReduxAction
, for example addTodoItem
will create promise
const addTodoItem: (test: string) => Promise<SimpleAction<ITodoState, [test: string]>>
and simply by dispatching it your react component dispatch(addTodoItem('test'))
your redux store will be updated, that's it!
in the case when you need to send the request to the server via HTTP and put the result into redux, you can use createServerAction
. For example loadTodoItemById
will create promise:
const loadTodoItemById: (id: string) => Promise<SimpleAction<ITodoState, APITodoItemResponse>>
and like previously by dispatching the function in the react component your store will be updated!
if you will call toString
method on any function, that was created from SRA build, it will return the name
of the action. (no more constants 😅)
Want more? Check the example
folder or ask questions
👷 Custom middleware
here is some cool example of using custom middleware:
// custom middleware for web requests
const middleWare = [
middlewareBuilder({
httpRequestHandler: async (httpMethod: httpMethod, url: string, body: any) => {
const data = await fetch(url, {
method: httpMethod,
body: body && httpMethod !== 'GET' ? body : null,
});
return data;
},
responseHandler: async (response: Response, dispatch: Dispatch) => {
const isRequestSuccess = response.status < 400;
if (!isRequestSuccess) {
const result = await addError(errorText);
dispatch(result);
}
return isRequestSuccess;
},
}),
];
// added support for redux-dev tool
const composeEnhancers =
(window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
// create store for redux
export const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(...middleWare))
);
here
httpRequestHandler
- it's a way how you can override HTTP requests to the server, and for example, use some custom logicresponseHandler
- and this will help you to handle response, and trigger some additional logic if something went wrong. (dispatch something for ex.****)