React Native开源项目笔记(1):redux管理数据

首先放上开源项目的地址：React-Native开源项目iShiWuPai
这边笔记主要是记录看开源项目iShiWuPai之后的一些知识点。前端的话一般都是使用的MVC框架，这样的话我也是从这三个方面学习，这个项目中的数据的话用的是Redux框架，View的话就是使用ReactNative框架。

手绘

index.ios.js文件

import React from 'react';
import { AppRegistry } from 'react-native';
import Root from './app/root';

AppRegistry.registerComponent('iShiWuPai', () => Root);

Root 文件是主入口，AppRegister.registerComponent（） 方法是用来注册ReactNative，第一个字符串要和iOS项目中注册的一致，第二个传入的是根类。

这里的 ()=>Root 的写法有点像iOS的Block块，姑且当做是JS里面匿名函数的写法吧。

root.js文件

import React from 'react';
import { Provider } from 'react-redux';
//这个是结构化好的state数据
import store from './store/store';
//这个是项目的主要逻辑
import App from './containers/app';

export default class Root extends React.Component {
    render() {
        return (
            <Provider store = {store} >
                 <App />
            </Provider>
        )
    }
}

这里使用到了react-redux文件，redux 主要是用来处理数据，管理state而存在的，将工程中使用的所有state结构化成树结构，这样的话就可以跟踪state的变化（大概就先了解这么多，以后再具体研究）。使用方法大概就是引入 Provider 类，并且将准备好的 store（就是已经结构化好的数据）传入。刚开始学习的时候不太懂怎么使用其他文件中的类的，这里看到 export 关键字就联系到了iOS中的 public 关键字，这样的话只要导入这个文件之后就可以直接使用 export 修饰的类了。

数据流

这里参考了文章：redux入门

store.js文件

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/rootRudcer';

let createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
let store = createStoreWithMiddleware(rootReducer);
// let state = store.getState();
// alert(state.Search.searchText)
export default store;

这里 redux 和 redux-thunk 的使用方法就是像代码里写的一样。reducer 是用来管理 state 和 action 类，这里每个页面的数据就是使用一个 reducer ，rootReducer 是各个 reducer 的集合。 action 是用来更新 state 的，因为将所有的state都集中在一起管理，那么用 action 来更新 state 就不会产生混乱了。就是可以理解成 reducer 提供了一个容器，在这个容器里面用 action 来更新 state 。let store = createStoreWithMiddleware(rootReducer); 这句换就是将 reducer 和 store 发生关联，这样当 store 里面的数据发生改变的时候就会触发 Action 事件。

middleware是用来实现 dispatch 方法的异步或者同步执行等不同的状态，这里使用的是异步的 dispatch 方法。

更新state流程 middleware作用

strollingReucer.js

//定义所有types的地方
import * as types from '../actions/actionTypes';
const initialState = {
    bannerList: [],
    feedList: [],
    isLoading: true,
    isLoadMore: false,
    isRefreshing: false,
};

let strollingReducer = (state = initialState, action) => {

    switch (action.type) {
        case types.FETCH_BANNER_LIST:
            return {
                ...state,
            }
        case types.RECEIVE_BANNER_LIST:
            return Object.assign({}, state, {
                bannerList: action.bannerList,
            })
        case types.FETCH_FEED_LIST:
            return Object.assign({}, state, {
                isLoadMore: action.isLoadMore,
                isRefreshing: action.isRefreshing,
                isLoading: action.isLoading,
            })
        case types.RECEIVE_FEED_LIST:
            return Object.assign({}, state, {
                feedList: state.isLoadMore ? state.feedList.concat(action.feedList) : action.feedList,
                isRefreshing: false,
                isLoading: false,
            })
        default:
            return state;
    }
}

export default strollingReducer;

reducer 的任务就是将传入的旧 state 和 action 更新并返回新的 state 。示例代码中的 strollingReducer 就是 rootReducer 中的一个。

strollingActions.js文件

import * as types from './actionTypes';
import Util from '../common/utils';

export let fetchBanners = ()=> {
    let URL = 'http://food.boohee.com/fb/v1/home/banners';

    return dispatch => {
        // 请求轮播数据
        dispatch(fetchBannerList());

        return Util.get(URL, (response) => {
            dispatch(receiveBannerList(response.banners))
        }, (error) => {
            console.log('Fetch banner list error: ' + error);
            dispatch(receiveBannerList([]));
        });
    }
}

let fetchBannerList = ()=> {
    return {
        type: types.FETCH_BANNER_LIST,
    }
}

let receiveBannerList = (bannerList) => {
    return {
        type: types.RECEIVE_BANNER_LIST,
        bannerList: bannerList,
    }
}

这是对应的的 strolling 类的 action 文件,这里需要更新 state 的情况就是加载网络数据之后更新。之前一直在想 strollingAction 是如何将自身传递给 strollingReducer 的，这里是自己理解的 dispatch 的作用。既然最后要将 reducer 合并成一个，这样的话 dispatch 直接操作的是 state 树结构，所有的 action 也都会返回一个固定的结构:

let receiveBannerList = (bannerList) => {
    return {
        type: types.RECEIVE_BANNER_LIST,
        bannerList: bannerList,
    }
}

这里返回的就是一个 action ，格式基本上就是这样。

Strolling.js文件

componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            const {dispatch} = this.props;
            dispatch(fetchBanners());
            dispatch(fetchFeeds(page, canLoadMore, isRefreshing, isLoading));
        });
    }

render() {

        const {Strolling} = this.props;

        let bannerList = Strolling.bannerList;
        let feedList = Strolling.feedList;
        let sourceData = {'banner': [bannerList], 'feed': feedList};

        let sectionIDs = ['banner', 'feed'];
        let rowIDs = [[0]];
                ...
    }

在 Strolling 中使用数据的时候有两个个地方没有看明白， const {dispatch} = this.props 和 const {Strolling} = this.props 。通过查 redux 文档，原来这个地方能从props里直接取到 dispatch 和 Strolling 是因为框架调用了React Redux connect()注入props。这样的话就做到了数据的传输使用。