rejax
check codesandbox example
import React from "react";
import { Rdx, store } from "rejax";
import { connect } from "react-redux";
import axios from "axios";
const instance = axios.create({
baseURL: "https://api.npms.io"
});
const superPowers = Rdx(instance); //default is axios, if you don't provide
export { store }; //provide store to Provider
const rejax = superPowers.rejax;
// now call rejax like this
const uselessObject = rejax({
reducerName: "reducer1",
storeAs: "todos", // if not provided type(action type) camelCased will be use as key to store payload in reducer
type: "ACTION1", //if it is synchronous action send action:{type:"ACTION",payload:{}}
fetch: {
url: "/todo/1",
method: "POST" // (not case sensitive) GET by default;
// formData: formData,if there,for formData form headers are set by default,also for formData or data default method is post so no need to send that unless different)
// data:send only one data or formData
}
});
// now see the MAGIC
const SomeConnectedComponent = props => {
const handleChange = e => {
rejax({
reducerName: "app",
storeAs: "packages",
type: "SEARCH",
fetch: {
url: `v2/search/suggestions?q=${e.target.value}`
}
});
};
return (
<>
<div>
<input onChange={handleChange} />
</div>
<div>
{props.packages && props.packages.success
? props.packages.data && props.packages.data[0].name
: null}
</div>
</>
);
};
const mapProps = ({ app = {} }) => {
return {
packages: app.packages
};
};
// above packages will look like this
const uselessObject1 = {
success: true,
// data:whatever data is
isFetching: false // is true when request is in flight
};
export default connect(
mapProps,
null
)(SomeConnectedComponent);