一、rn环境搭建

看我的另外一篇文章 http://www.jb51.cc/article/p-etqhadrj-bqb.html

二、rn起步

对于RN的时候，通过https://reactnative.cn/docs/0.50/getting-started.html 可知道，通过react-native引入组件，可在Component中的render方法使用JSX标签如Text、View、FlatList，通过react-native run-ios 构建，可在iPhone中运行出对应原生控件。
先看以下代码：

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,Text,View,TouchableHighlight
} from 'react-native';

export default class ReduxTest extends Component {
    constructor(props) {
            super(props);
            this.state = {
                keyword :'刘德华'
            };
    }
    searchMusic(keyword) {
        this.setState({keyword:keyword}
    }

      render() {
        return (
            <View style={styles.container}>
              <Text>{this.state.keyword}</Text>
              <TouchableHighlight underlayColor='#f1c40f'
                                    onPress={()=> this.updateData('更改了state')}>
                    <Text>点我</Text>
                    </TouchableHighlight>
            </View>
        );
  }
}

AppRegistry.registerComponent('ReduxTest',() => ReduxTest);

点击按钮后，文本内容变成’更改了state’，这是因为调用了this.setState，通过该方法更新state，会触发render()重新更新UI。这就差不多是Rn的使用方法了，state用于保存数据，通过setState触发UI重绘，典型的状态机机制。

三、使用redux

redux中有三个基本概念，Action，Reducer，Store。

1.Action

Actions 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。用法是通过 store.dispatch() 把 action 传到 store。

Action 有两个作用：

用Action来分辨具体的执行动作。比如是create 还是delete？或者是update？
操作数据首先得有数据。比如添加数据得有数据，删除数据得有ID。。action就是存这些数据的地方。

简单说，就是用来标识想要进行什么操作。
action本质就是一个js对象，但约定必须带有type属性，如：

{ type: ACTION_A,// 必须定义 type text }

一般我们都是使用一个函数来返回这个对象体，称之为actionCreator：

//actions.js

// actionType
export const ACTION_A = 'ACTION_A';
export const ACTION_B = 'ACTION_B';

// actionCreator
export let actionCreatorSetWord = (text) => {
    return {
        type: ACTION_A,// 必须定义 type
        text
    }
};

// actionCreator
export let actionCreatorSetList = (list) => {
    return {
        type: ACTION_B,// 必须定义 type
        list
    }
};

//action中间件，使dispathc能够接受function对象
export let getListData = keyword => dispatch =>{
    var apiUrl = REQUEST_URL + encodeURIComponent(keyword);
    fetch(apiUrl).
    then(
      (response) => response.json()
    ). 
    then(
      (responseData) => dispatch(actionCreatorSetList(responseData.data.info))
    );
}

这里的getListData方法，因为请求fetch，是异步action，因此使用了中间件，使dispathc能够接受该action返回的带dispatch形参的fuc函数（一般dispatch只接受js 对象），中间件在store创建的时候传入，见以下。

2.Reducer

Action 只是描述了有事情发生了这一事实，并没有指明应用如何更新 state。这是 reducer 要做的事情。
reducer要做的是判断action的type，返回新的state，也就是有(prevIoUsState,action) => newState 特征的函数。
如果reduer有很多个时，可以使用combineReducers将多个进行合并，先看代码：

//reducers.js
import { ACTION_A,ACTION_B } from './actions';
import { combineReducers } from 'redux';

let initialState = {
    keyword : '我的redux的默认keyword',list : []
};

//combineReducers使用keyword为key，所以这里的state 其实是 state.keyword，而不再是整个state
function reducerSetKeyWord(state = initialState.keyword,action) {
    switch(action.type) {
        case ACTION_A:
        // return Object.assign({},state,action.text);
        return action.text;
    }
    return state;
}

function reducerSetList(state = initialState.list,action) {
    switch(action.type) {
        case ACTION_B:
        // return Object.assign({},action.list);
        return action.list;
    }
    return state;
}

//若执行dispath 两个 reduxs都会被调用
//combineReducers决定了state的结构
let rootReducers =  combineReducers({
    keyword : reducerSetKeyWord,//key表示了处理state中的哪一部分 reducer方法只需要返回器对应部分的值，若省略key,则取reducer方法名为key
    list : reducerSetList,});
export default rootReducers;

这里使用了combineReducers，而且他还有一个作用，可以决定state的结构，并且在调用reducer(state,action)的时候，参数state默认取的就是其key对应的值

注意：

不要修改 state。
在 default 情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state。
如果没有旧的State，就返回一个initialState，这很重要！！！

3.Store

保存state的地方，创建Store非常简单。createStore 有两个参数，Reducer 和 initialState（可选）。

let store = createStore(rootReducers,initialState);

store有四个方法
- getState：获取应用当前State。
- subscribe：添加一个变化监听器。
- dispatch：分发 action。修改State。
- replaceReducer：替换 store 当前用来处理 state 的 reducer。

react-redux提供了Provider组件，可以用来把根组件包起来，这样，store就可以传递给所有的子组件
子组件中，便可以使用mapStateToProps方法和mapDispatchToProps方法，通过connect把state和dispatch绑定到该组件的props中，
例如，有MyText组件：

//index.ios.js
import React,View
} from 'react-native';

import { createStore,applyMiddleware } from 'redux';
import { Provider } from 'react-redux'
import thunk from 'redux-thunk';
import rootReducers from './src/reducers';

import MyText from './src/MyText';

let initialState = {
  keyword : '我的神啊',list : []
};

let store = createStore(
  rootReducers,initialState,applyMiddleware(thunk),);

export default class ReduxTest extends Component {
  render() {
    return (
      <Provider store={store}>
        <View style={styles.container}>
          <MyText/>
        </View>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',}
});

AppRegistry.registerComponent('ReduxTest',() => ReduxTest);

以上代码，这里import thunk from ‘redux-thunk’;引入thunk中间，通过applyMiddleware(thunk)引入。

//MyText.js
import React,{ Component } from 'react';
import {
    AppRegistry,TextInput,ScrollView,Image,FlatList,NavigatorIOS,TouchableHighlight,Button
  } from 'react-native';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionCreators from './actions';

const styles = StyleSheet.create({
    container: {
      flex: 1,flexDirection : 'row',}
  });

class MyText extends Component {

    constructor(props) {
        super(props);

    }

    componentDidMount(){

    }

    componentWillUnmount(){
        // this.unsubscribe();
    }

    changKeyword = ()=>{
        this.props.actionCreatorSetWord("调用actionCreatorSetWord");
        this.props.getListData("刘德华");

    };

    render(){
        return (
            <View style = {this.styles}>
                <Text style = {{flex: 1,backgroundColor:'red',top:20,height:20}}>{this.props.keyword}</Text>
                <Button style = {{flex: 1}} onPress = {this.changKeyword} title = "点我" />
                <FlatList
                    style = {{flex: 1,backgroundColor: 'green'}}
                    data={this.props.datalist}
                    renderItem={
                        ({item}) => (
                            <Text>{item.filename}</Text>
                          )
                    }
                />
            </View>
        );
    }
}

function mapStateToProps(state) {
    return { keyword: state.keyword,datalist:state.list};
}

//若不connect，默认直接返回dispatch
function mapDispatchToProps(dispatch) { //dispatch为store传过来的
    return bindActionCreators(actionCreators,dispatch); //将dispatch绑定到所有的actionCreator上
    //@return {actionCreator方法名: (parameter) => dispatch(actionCreator(parameter)）)} 本质就是对所有actionCreator的实现套上dispatch，key为Creator名，connect则把这个key绑定到pros上
}

// 最终暴露 经 connect 处理后的组件
export default connect(mapStateToProps,mapDispatchToProps)(MyText);

这里 mapStateToProps返回的对象会直接设置到props上
mapDispatchToProps方法中使用了一个bindActionCreators方法，可以将actions.js中多个action方法绑定到dispatch上，本质就是对所有actionCreator的实现套上dispatch，key为Creator名，connect则把这个key绑定到pros上，类似{actionCreator方法名: (parameter) => dispatch(actionCreator(parameter)）)}
，通过mapDispatchToProps返回，映射到改组件的props上，便可以直接通过this.props.getListData直接调用action

4.总结

综上，可以整理出Store、Reducer、Action三者的关系，store是管理协调着reducer、action、state。
store创建的时候传入了reducer，提供dispatch方法，因此通过store.dispatch(action)修改state，dispatch知道action该传给哪个reducer，更新什么state。所以，到最后，我们的更新操作简化成dispatch(action)的形式

摘录参考：
https://github.com/berwin/Blog/issues/4
http://cn.redux.js.org/docs/recipes/reducers/PrerequisiteConcepts.html
https://reactnative.cn/docs/0.50/getting-started.html

原文链接：https://www.f2er.com/react/302271.html

react-native + redux 实践