React-native 中加入redux的小例子

说在前面

在RN开发中,可以加入redux也可以不使用,因为对于redux适合应用的场景是
1,复杂的用户交互,数据处理
2,频繁与服务器进行相互交互
个人认为选择redux的时候要慎重,否者只会增加代码的沉余.

1.png

流程原理

流程.png

其中重要的环节就是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>
    );
  }

大功告成,希望可以帮助到需要的同学们.