Simple react redux with api calls
This is:
- Made to ease the creation of redux stores with api calls
- Super easy way to create Reducer and dispacthers
- Package with zero production dependencies
- Package with some kind of mongoose sanitization
Currently this only allows the use of pre-defined endpoints (listed at the end), but maybe in a near future there's a possibility to add endpoints, and maybe some validators too.
The guide
Install this package with
npm install @j-m-l/simple-react-redux-with-api-calls
Import it to the project with
const SMEE = require('@j-m-l/simple-react-redux-with-api-calls');
Call it with following values (existing endpoints listed below)
const { Reducer, Dispatchers } = SRRWAC(ReducerName, apiPath, wantedEndpoints, axiosInstance);
This will create a store for you with following initialState. GET /:id will write the current all other endpoints will update the All array
const initialState = {
all: [],
current: {},
};
Example code
testReducer.js
import SRRWAC from '@j-m-l/simple-react-redux-with-api-calls';
import axios from 'axios';
const test = SRRWAC('test', 'http://localhost:3001/api/test', ['get', 'getAll', 'replace', 'delete', 'add', 'update'], axios);
export const Reducer = test.Reducer;
export const Dispatchers = test.Dispatchers;
store.js
import { createStore, combineReducers } from 'redux'
import { Reducer } from './testreducer';
const reducers = combineReducers({
test: Reducer,
});
const store = createStore(
reducers
);
export default store
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
<React.StrictMode>
<Provider store={ store }>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
App.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Dispatchers } from './testreducer';
function App() {
const dispatch = useDispatch();
const addEntry = () => {
Dispatchers.add({ name: 'jeejee', desc: 'jotain' }, dispatch);
}
const getAll = () => {
Dispatchers.getAll(dispatch);
}
const all = useSelector(state => state.test.all);
console.log('store', all);
return (
<div className="App">
<nav>
<section>
<h1>something { JSON.stringify(all, null, 2) }</h1>
<button onClick={addEntry}>lisää</button>
<button onClick={getAll}>getAll</button>
</section>
</nav>
</div>
)
}
export default App
This can be combined with https://www.npmjs.com/package/@j-m-l/simple-mongo-express-endpoints to make simple Fullstack apps
Available endpoints are:
- get (Get by id /api/something/:id) http get
- getAll (Get all entried from that collection) http get
- add (Add new entry to the collection) http post
- update (Partially update the entry from collection) http patch
- replace (Replace the entry from the collection) http put
- delete (Delete entry from the collection) http delete
To select these to the wantedEndpoints, just add the wanted endpoint names to an array i.e., ['get', 'getAll', 'add', 'update', 'replace', 'delete']