React-Native配合ignite 开发文档

React-Native配合ignite开发文档

1.部署调试

1）Nuclide的start package有时候有问题，手机显示奇怪的错误，可以在命令行

npm start -- --reset-cache

重置后，启动正常。

2）安装程序到真机，如果命令行不行，androidstudio里安装。

3）真机调试，弹出菜单，晃动手机出，如果不出，手机设置->程序->本程序->允许悬浮框。

模拟器，ctrl+m，调出调试菜单。

4)Nuclide菜单选择start debugging,然后手机调试菜单选择remote debug

然后在程序中打断点，单步执行，可以看出程序的流转路径。

Redux的程序有点类似QT和win32的消息泵，每个地方跳转不靠函数调用，全是异步消息，异步调用，声明消息的地方比较特殊Action，处理消息的地方也比较特殊，下面咱们着重过一下。

5)初步调试的时候，要解决程序编码问题，主要是多个逗号，函数名大小不一致，没有定义这些，因为js不需要编译，这些还只能运行时发现。

优先看手机的错误提示，因为手机屏幕较小，有时候外壳程序会直接崩溃，这时候可以在终端开npm start，看这个输出。

程序基本能运行起来，没有上面这种简单报错后，开始使用调试器查看程序变量进行正常的逻辑调试。

2.开发

Ignite汇集了多个主流开发库，并组装成自己的框架。咱们先对最常用的，从服务器请求数据开始，这个不同于android的处理，只需要”后台线程+网络请求”一步，React需要使用redux的方式:

构建Action -> reducer ->合并reducer -> sagas配置

调用路径是，screen里发起Action，通过上面的reducer配置，传递到Sagas处理，处理请求后，put Action回到Redux，改变state，然后state改变又回到screen里，对应到prop的改变，最终screen在componentWillReceiveProps收到请求的数据。

2.1 API请求

这个我理解的是:

1）所有同一个网站的API接口都要写到一个Service里

2）然后每个具体的接口函数都要封装成一组Redux+Saga，然后名字起名要和接口对应，这样可以最少的修改代码达到可用状态。

我们以仪表系统的请求为例：

假如服务器端提供2个接口函数：

1.get_equipment_name_list GET无参

2.get_equipment_model_list POST参数是nameId

我们现在开始做第一个接口。

1.第一步，写Service

import apisauce from 'apisauce'

// our "constructor"

const create = (baseURL ='http://equipment.jimglobal.com/api/') => {

// ------

// STEP 1

// ------

//

// Create and configure an apisauce-based api object.

//

const api = apisauce.create({

// base URL is read from the "constructor"

baseURL,

// here are some default headers

headers: {

'Cache-Control': 'no-cache'

},

// 10 second timeout...

timeout: 10000

})

const login=(username,password) => api.post('login',{username :username,password:password})

const get_equipment_name_list=() => api.get('get_equipment_name_list')

const get_equipment_model_list=(nameId) => api.post('get_equipment_model_list', {nameId:nameId})

return {

login,

get_equipment_name_list,

get_equipment_model_list

}

}

// let's return back our create method as the default.

export default {

create

}

要点：1) baseURL写服务器地址

2)绿色的部分，注意get, post,和参数的处理。

3）红色的部分，对外提供的接口。

这个怎么上传文件我还没试。这个一般都不会写错。

2.第二步，写redux

对于get_equipment_name_list和get_equipment_model_list，我们要提供独立的redux。

比如我们第一个接口我们叫GetEquipmentNameList，我们就可以做下面

使用ignite generate redux GetEquipmentNameList

生成的代码：

我们不需要参数，所以可以把data去掉，改为：

const { Types, Creators } = createActions({

getEquipmentNameListRequest: null,

getEquipmentNameListSuccess: ['payload'],

getEquipmentNameListFailure: null

})

INITIAL_STATE中也不需要data，所以可以去掉

export const INITIAL_STATE = Immutable({

fetching: null,

payload: null,

error: null

})

Request自然也不需要data，去掉

// request the data from an api

export const request = (state) =>

state.merge({ fetching: true, payload: null })

然后这个文件就改好了，可以看到我们只需要调整参数部分，，和state部分，其他的用默认的就可以。

但是具体原理也要明白：

createActions中的getEquipmentNameListRequest被自动转化为GET_EQUIPMENT_NAME_LIST_REQUEST， 最后createReducer和处理函数关联起来,处理函数更新state。

3.第三步，写saga

Saga是真实发起api请求的地方。

默认生成的代码

我们注意到getGet#,生成器会添加get，所以咱们的命名还是不要GET这种动词比较好。除了默认的data参数，其他都是好的，所以命令很重要，配套的Redux和Sagas命令一定要一样。我们把action和data去掉，这个就完了。

export function * getGetEquipmentNameList (api) {

// make the call to the api

const response = yield call(api.getgetEquipmentNameList)

4.第四步，连接

连接要分两个地方，redux和saga要分别做连接

打开Redux/index.js文件：

EquipmentNameList : require('./GetEquipmentNameListRedux').reducer

这一行是我们要添加的，注意这个EquipmentNameList，这个不是胡乱起的，在screen中的mapStateToProps中的state是全局的，EquipmentNameList就是我们这个redux的数据。

打开Sagas/index.js文件，跟着注释家，导入types，导入saga的函数

/* ------------- Types ------------- */

import { GetEquipmentNameListTypes } from '../Redux/GetEquipmentNameListRedux'

/* ------------- Sagas ------------- */

import { getGetEquipmentNameList} from './GetEquipmentNameListSagas'

如果api是新的，就要搞一个实例

const appApi=AppApi.create()

然后连入root

takeLatest(GetEquipmentNameListTypes.GET_EQUIPMENT_NAME_LIST_REQUEST, getGetEquipmentNameList, appApi),

连接就做完了。

按步骤做，1分钟左右就能完成一套。

5.第五步，Screen里使用

现在我们在LoginScreen里加入对这个接口的调用。

先导入Action

import GetEquipmentNameListActions from '../Redux/GetEquipmentNameListRedux'

然后处理mapStateToProps，把数据合并到state去。

const mapStateToProps = (state) => {

return {

fetching: state.login.fetching,

response: state.login.response,

error: state.login.error,

equipmentname_payload : state.EquipmentNameList.payload

}

}

然后处理mapDispatchToProps，把Action封装成自己的props“getEquipmentNameList”， 这样自己的函数中就可以直接调用了。

const mapDispatchToProps = (dispatch) => {

return {

attemptLogin: (username, password) => dispatch(LoginActions.loginRequest(username, password)),

getEquipmentNameList:() => dispatch(GetEquipmentNameListActions.getEquipmentNameListRequest())

}

}

调用：随便什么地方，只要调用，就会发起请求。

//在这个地方做EquipmentName

this.props.getEquipmentNameList();

最后，接收请求，这个equipmentname_payload就是mapStateToProps最下面那行的那个，下面自己想怎么做就怎么做了。

componentWillReceiveProps (newProps) {

// this.forceUpdate()

// Did the login attempt complete?

if(newProps.equipmentname_payload)

{

}

作者：MackJson

链接：http://www.jianshu.com/p/efc9a00b843a

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。