redux-loading-status v1.0.3

redux-loading-status

Documentation

We often use redux, when there is an interface request, we will manually trigger an action to modify the loading state, to give the user a state machine interaction, redux-loading-status is to solve the loading state change, according to actionType Change the corresponding loading state by the type ending with _START, _SUCCESS, _END, _FAIL.

State Structure

    loading: {
        global: false,
        models: {
            users: false,
            todos: false,
            ...
        },
    }

Usage

Step 1 - install

	npm install redux-loading-status --save

Step 2 - import and use in project

import

    import loading,{createLoading} from 'redux-loading-status'

middleware

    const loadingMid= createLoading()
    //or
    const loadingMid = createLoading({
        show: ['START','BEGIN'],
        hide: ['SUCCESS', 'FAIL', 'END', 'SUCC']
    })
    //
    const middleware = [..., loadingMid];

reducer

    const rootReducer = combineReducers({
        ...,
        loading
    })

view

@connect(state => {return ({ loading : state.loading}）})
...
render() {
    return <Button loading={this.props.loading.global} >保存</Button>
}

//or 

render() {
    return <Button loading={this.props.loading.models.xxx} >保存</Button>
}