redux-task
Documents.
A Side Effects enhancer for redux. The idea is simple: By given an asynchronous task(such as submitting data to server) a name, redux-task will create and handle the task state for you automatically. Then you can retrieve the state with the task name in your component easily. No need to create store state like isSubmitting
or submitFailed
and manully change them any more.
Usage Example
Scenario: Render a button
and a span
. When user click the button, a ajax API will be called. When ajax finished, show result in span
.
Let's compare the solution between redux-thunk
and redux-task
.
redux-thunk
reducer.js
{ }
action.js
{ return }
component.js
const App = <div> <button onClick= props disabled= propsdisabled >click </button> <span> propsresult </span> </div> const ConnectedApp = App
redux-task
listener.js
const EVENT = 'fetch_event'const TASK = 'fetch_task' const listener =
component.js
const App = { let message = '' // automatically get state of the named task if propstask TASK === 'fulfilled' message = 'success' else ifpropstask TASK === 'rejected' message = 'failed' return <div> <button onClick= props disabled= propstask TASK === 'pending' >click</button> <span> message </span> </div> } const MonitorApp = App
Code can be found here: https://github.com/sskyy/redux-task/tree/master/examples/basic.
More examples such as how to cancel a task can be found here: https://github.com/sskyy/redux-task/tree/master/examples.
Why Another Side Effects Library?
- Save your time to create state for async actions.
- Generator and Promise are perfect for async flow control. Advanced scenario like cancel a async action can be handled easily. Thanks redux-saga for the thought.
- It's much intuitive than competitors.
License
MIT