UNPKG

rejax

Version:

You don't need to create reducer and action creator to use redux.

76 lines (66 loc) 1.89 kB
#rejax check [codesandbox example](https://codesandbox.io/s/j4ply3mx39) ``` 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); ```