#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);