给项目中添加REDUX

首先呢，因为之前有写过react中的redux，觉得还是挺麻烦的，代码量也比较大，后来用了dva，觉得很方便，所以这次我还是决定在RN中使用dva，那么开始吧。

在项目中安装dva

yarn add dva-core

yarn add react-redux

可能会遇到一个问题，启动项目后，会报错，大概是找不到redux，那就再执行一下

yarn add redux

然后就可以正常运行了

安装完之后重启项目，然后修改App.js文件，引入redux和dva

import React from 'react';
import Navigation from './src/navigation'
import dva from './src/store'

const app = dva({
  initialState: {},
  models: [],
  onError(e) {
    console.log(e)
  }
})

const App = app.start(<Navigation />)

export default App

dva已经被成功引用，引入dva之后，需要使用装饰器，需要安装依赖使RN支持装饰器

yarn add @babel/plugin-proposal-decorators

yarn add babel-plugin-transform-decorators-legacy

yarn add babel-preset-react-app

装饰器用来使用redux的@connect

然后是fetch

import API_URL from './API_CONFIG'

export async function $post(url = "", data = {}) {
    url = API_URL + url
    let requestConfig = {
        credentials: 'include',//为了在当前域名内自动发送 cookie ， 必须提供这个选项
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        mode: "cors",//请求的模式
        cache: "force-cache"
    }
    Object.defineProperty(requestConfig, 'body', {
        value: JSON.stringify(data)
    })

    try {
        const response = await fetch(url, requestConfig);
        const responseJson = await response.json();
        return responseJson
    } catch (error) {
        throw new Error(error)
    }
}

export async function $get(url = "", data = {}) {
    url = API_URL + url
    let requestConfig = {
        credentials: 'include',//为了在当前域名内自动发送 cookie ， 必须提供这个选项
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        mode: "cors",//请求的模式
        cache: "force-cache"
    }
    
    let dataStr = ''; //数据拼接字符串
    Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&';
    })

    if (dataStr !== '') {
        dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
        url = url + '?' + dataStr;
    }

    try {
        const response = await fetch(url, requestConfig);
        const responseJson = await response.json();
        return responseJson
    } catch (error) {
        throw new Error(error)
    }
}

再然后配置model

import { fetchUserInfo } from '../../api/user'

export default {
    namespace: 'user',
    state: {
        userInfo: {
            name: '',
            remark:'',
            email: ''
        }
    },
    reducers: {
        SET_USER_INFO(state, { payload }) {
            return { ...state, userInfo: payload }
        }
    },
    effects: {
        * fetchUserInfo(_, { put, call }) {
            const UserInfo = yield call(fetchUserInfo)
            yield put({
                type: 'SET_USER_INFO',
                payload: UserInfo.result
            })
        }
    }
}

这个fetchUserInfo是调用mock数据的方法

import { $post, $get } from './request'

export async function fetchUserInfo() {
    return $post('rn/userinfo')
}

之后就是在view中调用effect

import React, { Component } from 'react'
import { View, Text, Button, Alert } from 'react-native'
import { connect } from 'react-redux'

@connect(({ user }) => ({ user }))
class Home extends Component {

  constructor(props) {
    super(props);
  }

  fetchData = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'user/fetchUserInfo'
    })
  }

  render() {
    const { name, remark, email } = this.props.user.userInfo
    return (
      <View>
        <Text>我是一个首页，请看看我吧</Text>
        <Text>姓名： {name}</Text>
        <Text>签名： {remark}</Text>
        <Text>E-MAIL： {email}</Text>
        <Button title={'获取数据'} onPress={this.fetchData} />
      </View>
    )
  }
}
export default Home

到此DVA就完成了，过程还是挺痛苦的。引用dva和使用装饰器总会少包，少包也就少包吧，中途我升级了一下yarn，然后之前设置的东西没有了，我还忘了，就一直提示我网络错误，到后来才想起来。明天准备整理一下项目中可能会使用到的组件，并且挨个完成一下。保证下周项目开发过程中少出一些比较耗时的问题。加油，少年郎。

REACT-NATIVE小白日记（三）

给项目中添加REDUX

在项目中安装dva