React-Native-Redux数据和事件在组件间通信

React-Native 中数据和事件在组件间通信

React-Native中没有原生的block和代理，所以RN中数据的显示和事件绑定需要在组件间通信，需要一层层的传递，如果层级太深，导致传递的逻辑不太容易维护和管理，业务和数据掺杂一起，数据的改变可能导致render的刷新频率过高，影响性能，所以业界因为React的数据管理redux，通过store去管理数据和事件。

假如我们要实现一个计数器的小功能

Counter.png

通常数据和事件的通信

1. 在组件中实现加减重置逻辑
2. 实现回调方法（带参数）

import React from 'react';
import {View, Button, Text} from 'react-native';
import PropTypes from 'prop-types';

export default class CommonCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  decrement() {
    this.setState({
      count: this.state.count - 1,
    });
    this.props.updateCurrentCount(this.state.count - 1);
  }
  increment() {
    this.setState({
      count: this.state.count + 1,
    });
    this.props.updateCurrentCount(this.state.count + 1);
  }
  reset() {
    this.setState({
      count: 0,
    });
    this.props.updateCurrentCount(0);
  }

  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Button onPress={this.decrement.bind(this)} title={'-'} />
        <Text>{this.state.count}</Text>
        <Button onPress={this.increment.bind(this)} title={'+'} />
        <Button onPress={this.reset.bind(this)} title={'reset'} />
      </View>
    );
  }
}

CommonCounter.propTypes = {
  updateCurrentCount: PropTypes.func,
};

在界面中操作组件

<!--在界面中操作Counter组件-->
render() {
    return (
         <CommonCounter updateCurrentCount={this.updateCurrentCount.bind(this)}/>
    );
  }
 
  <!--实现回调方法-->
updateCurrentCount(count) {
    console.log(count);
  }

Redux实现

1. 项目中需要导入redux，react-redux
2. 需要创建action，redux
3. 实现connect，高级组件connect会对数据和事件进行处理，传递给store

创建action

export const increment = () => ({
  type: 'INC',
});

export const decrement = () => ({
  type: 'DEC',
});

export const reset = () => ({
  type: 'RES',
});

创建redux，绑定到高级组件connect上

import React from 'react';
import {connect} from 'react-redux';
import {increment, decrement, reset} from './ReduxAction';
import {Button, View, Text} from 'react-native';

const mapStateToProps = (state) => ({
  count: state.count,
});

const mapDispatchToProps = {
  decrement,
  increment,
  reset,
};

function Counter({count, increment, decrement, reset}) {
  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Button onPress={decrement} title="-" />
      <Text>{count}</Text>
      <Button onPress={increment} title={'+'} />
      <Button onPress={reset} title={'reset'} />
    </View>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

store会对数据和事件统一分配和处理

1. 需要导入{Provider},{creatStore}
2. 创建store

import {Provider} from 'react-redux';
import {createStore} from 'redux';

当store下的组件发生变化时，会更新redux，action，去做一些相应的处理

render() {
    return (
      <Provider store={store}>
        <Counter />
      </Provider>
    );
  }
  
  const initialState = {
  count: 0,
};

function reducer(state = initialState, action) {
  let newCount = 0;
  switch (action.type) {
    case 'INC':
      newCount = state.count + 1;
      break;
    case 'DEC':
      newCount = state.count - 1;
      break;
    case 'RES':
      newCount = 0;
      break;
    default:
      return state;
  }
  console.log(newCount);
  return {...state, count: newCount};
}

const store = createStore(reducer);

更多Redux的使用，我会在接下来整理出具体的文档出来，供React-Native使用者更加便捷的操作数据和事件，做到业务数据分离，降低耦合，降低开发难度，具体代码我已上传GitHub