react-native，redux，redux-saga组合开发实现

简单的说搞react开发的痛点之一，单向数据流的传递，redux统一管理数据，redux-saga又处理管理了异步调用。

要实现的内容如下，界面

目录结构

首先从请求接口入手，用axios封装请求接口，统一处理请求 axios.js

import axios from 'axios'

let defaultConfig = {
	timeout: 3000,
}
let instance = axios

class Axios {
    constructor(props) {
        if (props && typeof props == 'object') {
            instance = axios.create(props)
        } else {
            instance = axios.create(defaultConfig);
        }
        
        //拦截
        instance.interceptors.request.use((config) => {
            return config;
        }, (error) => {
			console.log(error)
            return Promise.reject(error);
        });

        //日志 响应结果
        instance.interceptors.response.use((response) => {
            return response.data;
        }, (error) => {
            console.log(error)
            return Promise.reject(error);
        })
    }

	send(params) {
        if (!params || typeof params != 'object') {
            throw new Error('params is undefined or not an object')
        }
        if (params.method == 'GET') {
			return get(params.url)
        } else if (params.method == 'POST') {
            return post(params.url, params)
        }
    }
}

async function get(url, callback) {
    try {
        let response = await instance.get(url)
        return response
    } catch (e) {
        console.log(e)
    }
}

async function post(url, params, callback) {
    try {
        let response = await instance.post(url)
		//eturn callback(response)
		return response
    } catch (e) {
        console.log(e)
    }
}

export default Instance = new Axios();

store.js 管理以及开发环境下的及时更新

const sagamiddleware = createSagaMiddleware();

export default function configureStore(initStore = {}) {
    const middlewares = [sagamiddleware];
    if (__DEV__) {
        middlewares.push(logger)
    }
    const createStoreMiddleware = applyMiddleware(...middlewares)(createStore);
    const store = createStoreMiddleware(
        createReducer(), initStore
    );

    store.runSaga = sagamiddleware.run;
    store.close = () => store.dispatch(END);
    // Make reducers hot reloadable, see http://mxs.is/googmo
    /* istanbul ignore next */
    if (module.hot) {
        module.hot.accept(() => {
            const nextRootReducer = require('../reducers/index').default;  //reducers 文件下的 index
            store.replaceReducer(createReducer(nextRootReducer))
        }, )
    }
    return store
}

reducers 文件下的 index.js，