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， combineReducers各个模块的 reducer

import { combineReducers } from 'redux';
import { latestNews } from './latestNewsReducer';
import { special } from "./specialReducer";
import { themes } from "./themesReducer";

export default createReducer = (injectedReducers) => {
    return combineReducers({
        latestNews: latestNews,
        special: special,
        themes: themes,
        router: router,
        ...injectedReducers
    })
}

接下来就是各个模块的 reducer了，接受action 返回的 state 或者data，由于都是get请求，各个模块的请求都大同小异，以最新模块为例, latestNewsReducer.js 如下

import { RQUEST_LATESTNEWS, SUC_LATESTNEWS, DESTORY_LATESTNEWS } from '../actions/latestnews/types';

export const latestNews = (state = null, action) => {
    switch (action.type) {
        case RQUEST_LATESTNEWS:
            return state
        case SUC_LATESTNEWS:
            return Object.assign({}, state, {
                data: action.data
            })
        case DESTORY_LATESTNEWS: 
            return null
        default:
            return state;
    }
}

type 为常理单独写出来的理应单独新建 const 目录用于放各个模块的 type，图快就都挨着action放了

还是以最新模块为例子 type.js

//进入请求请求 
export const FETCHED_LATESTNEWS = 'fetched_latestnews'
//发送请求
export const RQUEST_LATESTNEWS = 'request_latestnews'  
//请求成功 返回数据
export const SUC_LATESTNEWS = 'suc_latestnews'  
//销毁
export const DESTORY_LATESTNEWS = 'destory_latestnews' //当离开当前页面时 返回此  置空stroe对应的值

latestNews的action 也很简单

import { RQUEST_LATESTNEWS, SUC_LATESTNEWS, FETCHED_LATESTNEWS, DESTORY_LATESTNEWS } from './types';

//初始请求
export const fetchedLatestNews = () => {
    return {
        type: FETCHED_LATESTNEWS
    }
}
//开始发送请求
export const requestLatestNews = () => {
    return {
        type: RQUEST_LATESTNEWS
    }
}

//请求成功
export const sucLatestNews = (data) => {
    return {
        type: SUC_LATESTNEWS,
        data
    }
}

//销毁
export const destoryLatestnews = () => {
    return {
        type: DESTORY_LATESTNEWS
    }
}

现在开始sagas的编写

-------------------------------------------------嗯··---------------------------------------------

-------------------------------------------------辣眼睛---------------------------------------------

sagas目录下index 统一引入各个模块对应的请求方法

index.js

import { all, takeEvery, fork } from 'redux-saga/effects';

import { FETCHED_LATESTNEWS } from '../actions/latestnews/types'
import { getLatestNews } from './latestnews';

import { FETCHED_SPECICAL } from '../actions/special/types';
import { getSpecial } from './special';

import { FETCHED_THEMES } from '../actions/themes/types';
import { getThemes } from './themes';

export default function* rootSaga() {
   
    yield takeEvery(FETCHED_LATESTNEWS, getLatestNews);
    yield takeEvery(FETCHED_THEMES, getThemes);
    yield takeEvery(FETCHED_SPECICAL, getSpecial);
}

还是以最新为例：

import { put, call } from 'redux-saga/effects';
import { SUC_LATESTNEWS } from '../actions/latestnews/types';
import { repoLoadingError, requestLatestNews, sucLatestNews } from "../actions/latestnews/index";
import { GetLatestNews } from '../apis/latestnews/fetch';


export function* getLatestNews() {
    try {
        yield put(requestLatestNews())
        const data = yield call(GetLatestNews);
        yield put({type: SUC_LATESTNEWS, data});

    } catch (error) {
        yield put(repoLoadingError(error));
    }
}

现在到容器了

container，对应的最新模块的container

latestnews.js 是嵌套在第个 tabNavigator 里的，和热门平级， tabNavigator 配置都大同小异此处省略···

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { requestLatestNews, sucLatestNews, fetchedLatestNews } from '../../actions/latestnews/index';

class LatestNews extends Component {
    componentDidMount() {
        this.props.fetchedLatestNews()
    }
   
    render() {
        let list = this.props.latestNews;
        return (
            <View>
                {list ? <Text>{JSON.stringify(this.props.latestNews)}
                    </Text> :  <Text>LOADING</Text>
                }
            </View>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        latestNews: state.latestNews
    }
}

const matchDispatchToProps = (dispatch) => {
    return bindActionCreators({
        fetchedLatestNews: fetchedLatestNews,
    }, dispatch)
}

export default connect(mapStateToProps, matchDispatchToProps)(LatestNews);

进行到这里，配置react-navigation，

tabNavigator.js

import React, { Component } from 'react';
import { View, Image, StyleSheet } from "react-native";
import { TabNavigator } from "react-navigation";
import News from '../containers/latestnews';
import Themes from '../containers/themes';
import Special from '../containers/special';

export default tabNavigator = TabNavigator(
    {
        newsTab: {
            screen: News,
            navigationOptions: {
                tabBarLabel: '最新',
                tabBarIcon: ({ tintColor, focused }) => (
                    <Image resizeMode='contain'
                        source={require('../icon/icon_latestnews.png')}
                        style={[style.footImage, {tintColor: tintColor}]}
                    />
                )
            }
        },
        Themes: {
            screen: Themes,
            navigationOptions: {
                tabBarLabel: '主题',
                tabBarIcon: ({ tintColor, focused }) => (
                    <Image resizeMode='contain'
                        source={require('../icon/icon_themes.png')}
                        style={[style.footImage, {tintColor: tintColor}]}
                    />
                )
            }
        },
        Special: {
            screen: Special,
            navigationOptions: {
                tabBarLabel: '专栏',
                tabBarIcon: ({ tintColor, focused }) => (
                    <Image resizeMode='contain'
                        source={require('../icon/icon_special.png')}
                        style={[style.footImage, {tintColor: tintColor}]}
                    />
                )
            }
        },
    }, {
        backBehavior: 'none',
        tabBarPosition: 'bottom',
        lazy: true,
        lazyLoad: true,
        initialRouteName: 'newsTab',
        tabBarOptions: {
            showIcon: true,
            pressOpacity: 0.8,
            style: {
                height: 45,
                backgroundColor: '#ffffff',
                zIndex: 0,
                position: 'relative'
            },
            labelStyle: {
                fontSize: 12,
                paddingVertical: 0,
                marginTop: 0
            },
            iconStyle: {
                marginTop: -5
            },
            tabStyle: {
                backgroundColor: '#eeeeee',
            },
            inactiveTintColor: '#212121',
            activeTintColor: '#0084ff'
        }
    }
)

let style = StyleSheet.create({
	footImage: {
		width: 24,
		height: 24
	},
});

三个大模块，最新，主题和专栏都放在一个tabNavigator里，再配置到StackNavigator，最新里还嵌套一个 tabNavigator，也可以把三个主题都放 stackNavigator里。放在stackNavigator，某些方面会更简单也更直观

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { addNavigationHelpers, StackNavigator } from 'react-navigation';
import tabNavigator from './tabNavigator';

export const Navigator = StackNavigator({
    tab: { screen: tabNavigator }
    },{
        navigationOptions: {
            header: null,
            headerBackTitle: null,
            headerTintColor: '#333333',
            showIcon: false,
            swipeEnabled: false,
            animationEnabled: false,
            initialRouteName: 'tab',
            lazy: true,
        },
        mode: 'card',
        lazy: true,
});
export default Navigator;

当页面滑动离开当前模块进入下一个模块，减小开支，可以选择把离开模块的store 清空，修改入口文件如下

调用onNavigationStateChange 方法

class Index extends Component {
    _onNavigationStateChange = (prevState, nextState) => {
        let prev = prevState.routes[0],
            preIndex = prev.index,
            preRouteName = prev.routes[preIndex].key,
            
            switch (preRouteName) {
                case 'newsTab':
                    store.dispatch(destoryLatestnews())
                    break;
                case 'Themes':
                    store.dispatch(destoryThemes())
                    break;
                default:
                    store.dispatch(destorySpecial())
                    break;
            }
    }
    
    render() {
        return (
            <Provider store={store}>
                <AppStackNavigator onNavigationStateChange={(prevState, currentState) => {
                    this._onNavigationStateChange(prevState, currentState)
                  }}/>
            </Provider>
        );
    }

}

export default Index;

本来想在页面离开，组件销毁时在componentWillUnmount 里调用 destoryLatesNews() 这些方法的，但是滑动切换的时候组件并不会销毁，那么只有更新周期函入手了。

---------------------------------------------------------------------

ps: 知道怎么在componentWillUnmount 里调用 destoryLatesNews 方法或者进入到此函数的敬请指点，求告知呀

---------------------------------------------------------------------

那么就需要修改一下 latestnews 进入到在更新周期函数中如下写入

shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.navigation.state.routeName === 'newsTab' && this.props.latestNews == null) {
            this.props.fetchedLatestNews()
            return true;
        }
        return false;
       
    }

大体流程就这样了，当然redux-saga 各个函数方法的用途还需多理解，为什么没进入 componentWillUnmount

是为什么呢·····哈哈哈哈· 等告知·····

有需要的交流的可以加个好友

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

猜你喜欢