说在前面
在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>
);
}
大功告成,希望可以帮助到需要的同学们.
