Declarative React/Redux component to handle side effects
MIT License
Redux connect
ed React component to handle side effects
Working/Monitoring side effects is messy business. Though this has become better
in recent times with redux-saga
and the like, I couldn't find an easy way to
integrate this flow into the UI markup. Maintaining values like isLoading
,
isSuccess
across the various reducers leads to boilerplate-ish code and
annoying bugs.
I came upon this solution while playing around with redux middelwares and render props but this general problem has been long solved.
Some reading material on the topic
And here's a list of alternatives
The above approaches are really useful but required me into adopting a flow that
was different from the one I've been working with redux
and redux-saga
.
Hence, my reason for creating this library. Do note that, this library only
assumes you have redux
and let's you use any async pattern you currently have.
npm install @faizaanceg/redux-side-effect --save
You can check out the examples
directory. To run any of them, follow these steps.
git clone <this-repo>
cd <this-repo>
npm install && npm build
cd examples/<any-example>
npm install && npm start
For an interactive example, you can check out an example made with CodeSandbox
here.
<SideEffect
startsOn={actionTypes.GET_DATA}
succeedsOn={actionTypes.GET_DATA_SUCCESS}
failsOn={actionTypes.GET_DATA_FAILURE}
render={({ state, errors }) => (
<>
{state === Effect.READY && "No action has started yet"}
{state === Effect.START && "Loading user info"}
{state === Effect.SUCCESS && "Successfully loaded information"}
{state === Effect.FAILURE && errors.message}
</>
)}
/>
A side effect has the following states:
const Effect = {
READY: "ready",
START: "start",
SUCCESS: "success",
FAILURE: "failure"
};
The SideEffect
component can listen to action(s) and monitor the status of the
async action as and when you dispatch corresponding actions.
MIT
PRs are welcome!