React-native 中加入redux的使用
说在前面
在RN开发中,可以加入redux也可以不使用,因为对于redux适合应用的场景是 1,复杂的用户交互,数据处理 2,频繁与服务器进行相互交互 个人认为选择redux的时候要慎重,否者只会增加代码的沉余.
流程原理
其中重要的环节就是store, action, reducers.下面一一来介绍一下 action: 组件通过去发出请求: 例如:你想喝水(action),那么首先你要把你想喝水的想法发给大脑store: 想当与是一个中枢神经,通过它把想和水的想法传递给你的大脑 reducers: 就是你的大脑,通过处理传来的想喝水的行为,分析你是不是可以喝水.然后把这个状态在通过中枢神经传递给组件. 文档在这 传送门 自己用自己的理解阐述来一下这个过程.
例子
说的再好,也要通过实践来解决问题,因为写起来确实坑比较多.下面用一个简单的获取定位的demo来展示一下整个流程 首先创建一个action:
export const getLocalIP = () => { return (dispatch, getState) => { const dispatchIfValid = action => { dispatch(action) } // 开始获取位置信息 dispatchIfValid({ type: '开始' }); // 获取定位信息 fetch('网络请求的http链接').then((response) => { return response.json(); }).then(json => { dispatchIfValid({ type: '成功 ,cityName: json.result.ad_info.city })); }) .catch((error) => { dispatchIfValid(type: '失败'); }); } }; 复制代码这个地方我写的时候遇到的问题是: 请求网络属于异步请求,需要在store中加入个中间件(redux-thunk等), 对于中间件的概念这里不说了.可以自行谷歌下 然后是我们的reducers文件
const localReducer = (state = { type: '开始' }, action) => { const payload = action.payload // 判断 action 类型 switch (action.type) { case '开始': return { getLocalStatus: '正在定位中', }; case '成功': return { getLocalStatus: payload.cityName, ...payload }; case '失败': return { getLocalStatus: '定位失败,请手动输入', } default: return { getLocalStatus: '', } } }; export default localReducer; 复制代码这个地方基本上没什么可说的了,是通过传来的state来对比之前state的状态,如果改变了,回传给组件需要改变,相当于this.setstate({});的意思,没改变就不改变 下面是store文件
import localReducers from '../reducers/localReducers'; // 引入刚创建的reducer文件 import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk' export default () => { // 根据 reducer 初始化 store const store = createStore(localReducers, applyMiddleware(thunk)); return store; } 复制代码整个程序中存在一个store文件.用来存储state的状态. 以上就是全部的文件 接下来要把store, action跟我们的页面组件联系起来 在程序index.js文件中(入口文件中)
<Provider store={store}> <App /> </Provider> 复制代码Appjs文件中:
import { connect } from 'react-redux'; import { getLocalIP } from '../src/action/localAction'; // 获取 state 变化 传给子控件的props const mapStateToProps = (state) => { return { local: state.getLocalStatus, } }; // 发送行为 这里笔者没有用到但是写出来了 const mapDispatchToProps = (dispatch) => { return { getLocal: () => dispatch(getLocalIP()), } }; export default connect(mapStateToProps)(App); 复制代码以上把App.js文件涉及到redux的地方都已经写出来了.可以用一个点击事件去发出action
this.props.dispatch(getLocalIP()); 复制代码
render() { return ( <View style={styles.container}> <Text>{this.props.local}</Text> </View> ); }
作者：一天清晨
链接：https://juejin.cn/post/7020606932851359781