首先放上开源项目的地址：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。这样的话就做到了数据的传输使用。
网友评论