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.
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.
reducer.js
function reducer(state, action) {
switch(action.type) {
case 'START':
return {
disabled: true,
result: ''
}
case 'SUCCESS':
return {
disabled: false,
result: 'success'
}
case 'FAILED':
return {
disabled: false,
result: 'failed'
}
default:
return {
disabled: false,
result: ''
}
}
}action.js
function start(dispatch) {
dispatch({ type: 'START' })
return fetch('data_url')
.then(() => dispatch({ type: 'SUCCESS' }))
.catch(() => dispatch({ type: 'FAILED' }))
}component.js
const App = (props) => (
<div>
<button
onClick={ () => props.dispatch(start) } disabled={ props.disabled }
>click
</button>
<span>{ props.result }</span>
</div>
)
const ConnectedApp = connect(f => f)(App)listener.js
const EVENT = 'fetch_event'
const TASK = 'fetch_task'
const listener = listen(EVENT, function* listener() {
// give a name to the asynchronous task
yield name(fetch('data_url'), TASK)
})component.js
const App = (props) => {
let message = ''
// automatically get state of the named task
if( props.task[ TASK ] === 'fulfilled') {
message = 'success'
}else if(props.task[ TASK ] === 'rejected') {
message = 'failed'
}
return (
<div>
<button
onClick={ () => props.emit(EVENT) }
disabled={ props.task[ TASK ] === 'pending' }
>click</button>
<span>{ message }</span>
</div>
)
}
const MonitorApp = monitor(task => { return { task } })(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.
- 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.
MIT