fetch-blob-redux-middleware

fetch-blob-redux-middleware redux middleware

npm install --save fetch-blob-redux-middleware

Usage

import fetchBlobMiddleware from 'fetch-blob-redux-middleware'

When I use'react-native-fetch-blob'in conjunction with'redux' when I want to cancel the request, the'action'becomes harder and harder to write and the code repeats more and more, so I wrote this middleware to solve these problems.

Using in combination with redux-actions

Because it supports FSA actions, you can use redux-fetch-blob-middleware in combination with redux-actions or create-action.

Example: Async action creators

This works just like in Flummox.

In action:

export const test = () => createAction("TEST",()=> 
    RNFetchBlob.fetch('GET', 'http://www.example.com/api/')
)

In component:

@connect(
    createSelector(
        [state=>state.test],
        (test)=>({test})
    ),
    dispatch=>({
        testAction:bindActionCreators(testAction,dispatch),
    })
)
class Test extends Component{
 
    constructor(props) {
   		super(props);
   		this.testFetchCancel = null;
   }
   
   componentWillUnmount(){
        //If the request has not come back, I can cancel it here.
        this.testFetchCancel && this.testFetchCancel.cancel();
   }
 
    onPress = () =>{
        let {
            props
        } = this;
        let {
            testAction
        } = props;
     	this.testFetchCancel = testAction.test();
    }
    
    rebder(){
        return (
            <Button 
                onPress={this.onPress}
            >
                <Text>action<Text>
            </Button>
        )
    }
}

Unlike Flummox, it will not perform a dispatch at the beginning of the operation, only at the end. We're still looking into the best way to deal with optimistic updates. If you have a suggestion, let me know.