React Native 之 Redux使用教程

在一个普通的React Native中,如果业务逻辑不够复杂,或者state和props不需要跨越多个页面传递,也不需要相互没有父子组件等关系的组件之间传递数据,这基本就不需要使用Redux.

在之前我们也说过了,组件之间传递数据的几种方式,在组件中,通过改变state去改变组件的显示,在组件之间通过props去传递数据,如果是没有关系的组件之间,可以通过注册事件,去传递数据.

这一节主要说一下,如果我们要做一个大型的React Native,通过Redux,如何能够更好的管理好我们的数据.

管理数据的框架不是只有这一个,随便搜一下,有很多,我的项目中选择了使用它,因此,我就大概介绍一下.

首先你需要知道Redux的几个过程:以下所有内容都是本人理解,有错误之处,还请谅解.

Redux很多人都说,类似与网页版的MVC,我其实对这些都理解不太深入.

我认为Redux,主要做了这么几件事情.

reduce中初始化了所有需要的数据,然后更新数据的操作也在这里,这里指的数据都是state.

action这里面主要描述,可以做哪些操作,就是制定有哪些类型的操作可以做.

其中这个部分可以加入中间件,其实很多部分都可以加,我说的中间件是网络访问中间件,要不然这整个环节处理数据,没有办法处理网络请求,这显示是不被允许的.

首先通过dispatch发起action,在action中通过中间件进行网络请求,然后将action继续dispatch,最后根据action类型 找到reduce对应的部分,然后会执行更新state的操作,这个操作执行完之后,界面就会自动更新,其实这里面最终要的还是,我们的数据,在需要的时候怎么去用.

这里面还有一部分,就是取出所有state的数据,然后在我们需要的地方起使用.

下面大概给出各个部分的代码,方便我们更好的理解.

首先写一个action:

function setAction(args) {
    return {
        type: ActionTypes.getState,
        value: args
    };
}

上面就是一个action,而我们怎么使用这个action呢,其实就是调用

dispatch(setAction(args));

其实就是调用了这么一句话,

而这个dispatch又是从哪里来的呢?

 let {dispatch } = this.props;

在你的组件中,使用这句话,就拿到了dispatch,通过这个东东,就可以执行action.

执行action的时候,args这个东西,可以是赋值给仓库里state这个东东新的值,这个值不可能都是现成的,也有我们通过网络请求,拿到的JSON串.

而这个网络请求,需要我们什么时候去做呢,这时候就需要使用redux-thunk这个异步中间件.

你在store里面,把这个弄上,具体这个stroe可以这么写:

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import Reducer from './Reducer.js';

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

export default function Store(initialState) {
  const store = createStoreWithMiddleware(Reducer, initialState);
  return store;
}

通过上面这段代码,stroe就有了,然后你要在你最外层的组件包裹一下:

具体代码如下:

import React, { Component } from 'react';
import { Provider } from 'react-redux';

import Main from './Main';
import Store from './store.js';
const store = Store();

export default class index.android extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Provider store={ store }>
        <Main />
      </Provider>
    );
  }
}

这样的话,我们store的容器就有了.

然后,在action里面就可以有了网络访问的东西,要不然你写在action里面会直接报错的.

具体代码如下:

function action() {
    return dispatch => {
        request.get(url,  function (responseJson) {
           dispatch(action1(date));
            } );
    }
}
function Action1(data) {
    return {
        type: ActionTypes.getState,
        value: data
    };
}
dispatch(action());//这句是执行上面这个方法的.

这下大家应该明白,网络请求放的位置了.

这时候,action有了,数据有了,怎么改变store的state呢,就需要用到reduce了.

这个reduce具体咋写网上有很多,就不具体说了

大概就是设置一个初始化数据
然后根据action中的type,改变state.
改变完了就有了新的全家state.

下面说一下如何使用最新的state.

在组件的最后面写上这么一段代码:

function mapStateToProps(state) {
  return state;
}
export default connect(mapStateToProps)(JS1);

这在JS1这个组件中,就可以用了.

通过这句代码:

   const { States } = this.props;

然后就可以取出你所需要的数据,比如States.data等.

执行自己的处理,操作.虽然步骤很麻烦,但是当状态混乱程度达到一定量级的时候,使用就会比原来简单.

这里不建议一个页面一个简单的状态就使用这,这会给自己增加无限大的代码量,很不值得.