zoukankan      html  css  js  c++  java
  • React Native 添加 Redux 支持

    0x1 前言

    之前写的项目都是人家编写好的脚手架,里面包含项目所需的环境文件,但由于有些东西用不到打包增加软件体积,所以自己从头搭建个环境。是基于 Native Base + react-navigation + Redux 的 react Native 脚手架,现在项目环境如下:

    {
      "name": "app",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "react-native start",
        "test": "jest",
        "lint": "eslint ."
      },
      "dependencies": {
        "native-base": "^2.13.4",
        "react": "16.8.6",
        "react-native": "0.60.5",
        "react-native-gesture-handler": "^1.3.0",
        "react-native-keyboard-aware-scroll-view": "^0.9.1",
        "react-native-reanimated": "^1.2.0",
        "react-navigation": "^3.11.1"
      },
      "devDependencies": {
        "@babel/core": "^7.5.5",
        "@babel/runtime": "^7.5.5",
        "@react-native-community/eslint-config": "^0.0.5",
        "babel-eslint": "7.2.3",
        "babel-jest": "^24.8.0",
        "eslint": "4.4.1",
        "eslint-plugin-flowtype": "2.35.0",
        "eslint-plugin-import": "2.7.0",
        "eslint-plugin-jsx-a11y": "6.0.2",
        "eslint-plugin-prettier": "2.1.2",
        "eslint-plugin-react": "7.1.0",
        "eslint-plugin-react-native": "3.0.1",
        "jest": "^24.8.0",
        "metro-react-native-babel-preset": "^0.56.0",
        "prettier": "1.5.3",
        "react-test-renderer": "16.8.6"
      },
      "jest": {
        "preset": "react-native"
      }
    }

    资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

    0x2 添加 Redux 支持

    这里大概讲解下安装类库支持:

    yarn add yarn add react-navigation react-native-gesture-handler react-native-reanimated native-base

    链接字体库资源:

    react-native link

    react-navigation 在 Android 环境额外添加代码支持,具体情况文档: MainActivity.java

    react-navigation 在 react-native 版本大于 0.60 的时候不需要执行 react-native link 链接。

    由于项目需要状态管理支持,故添加 Redux 状态管理类库支持,在 React Native 环境下和 React 项目一样:

    yarn add redux react-redux redux-logger

    redux-logger 是监控状态数据流日志,可以在控制台输出状态值的信息。

    由于项目基本环境是 Native Base 环境,这里怎么安装它就不再描述了,故在基础项目下添加项目支持 Redux 即可。打开 ./src/App.js 添加 Redux 能力支持:

    import {Root} from "native-base";
    import {createStackNavigator, createAppContainer} from "react-navigation";
    import {applyMiddleware, createStore} from "redux";
    import {Provider} from "react-redux";
    import React from "react";
    import logger from "redux-logger";
    import allReducers from "./store";
    import reduxDemo from "./screens/reduxDemo";
     
    const store = createStore(
      allReducers,
      applyMiddleware(logger)
    ); // 创建 Store
     
    const AppNavigator = createStackNavigator(
      {
        ReduxDemo: {screen: reduxDemo},
      },
      {
        initialRouteName: "ReduxDemo", // 路由入口
        headerMode: "none", // 由于 react-navigation 默认导航栏自定义效果很差,故隐藏
      },
    );
     
    const AppContainer = createAppContainer(AppNavigator);
     
    export default () => (
      <Provider store={store}>
        <Root>
          <AppContainer/>
        </Root>
      </Provider>
    );

    创建状态触发事件业务集 ./store/reducers/counter.js :

    let count = 0;
    export default function (state = count, action) {
      switch (action.type) {
        case "Increment":
          count++;
          break;
        case "Decrement":
          count--;
          break;
      }
      return count;
    }

    这里是根据触时不同条件要执行的业务,例如数字的增加和减少。假如项目下有很多触发业务集合,我们需要把他们归纳一起,并且方便获取状态值获取,新建 ./src/store/index.js :

    import {combineReducers} from "redux";
    import countReducer from "./reducers/counter";
     
    const allReducers = combineReducers({
      count: countReducer,
    });
    export default allReducers;

    然后需要有个动作器来触发上面的业务,新建 ./src/store/actions/counter.js :

    export function increment() {
      return {
        type: "Increment"
      };
    }
     
    export function decrement() {
      return {
        type: "Decrement"
      };
    }

    如果需要改动状态值只能从上面的函数进行触发,这是唯一入口。

    下面就编写页面进行测试,新建 ./src/screens/reduxDemo/index.js :

    import React, {Component} from "react";
    import {Container, Content, Text, Card, Header, Body, Button, Title, CardItem} from "native-base";
    import {increment, decrement} from "../../store/actions/counter";
    import {bindActionCreators} from "redux";
    import {connect} from "react-redux";
     
    class Counter extends Component {
      render() {
        console.log(this.props.count);
        return (
          <Container>
            <Header>
              <Body>
                <Title>Redux 计数器</Title>
              </Body>
            </Header>
            <Content padder>
              <Card>
                <CardItem>
                  <Text>
                    {this.props.count}
                  </Text>
                </CardItem>
              </Card>
              <Text/>
              <Button block onPress={() => this.props.increment()}>
                <Text>增加</Text>
              </Button>
              <Text/>
              <Button block onPress={() => this.props.decrement()}>
                <Text>减少</Text>
              </Button>
            </Content>
          </Container>
        );
      }
    }
     
    function mapStateToProps(state) {
      return {
        count: state.count // 这里等效于 prop.state 不过redux1帮你封装好的
      };
    }
     
    function matchDispatchToProps(dispatch) {
      return bindActionCreators({increment: increment, decrement: decrement}, dispatch); // 绑定动作事件
    }
     
    export default connect(mapStateToProps, matchDispatchToProps)(Counter); // 连接Redux
  • 相关阅读:
    LeetCode 32. 最长有效括号(Longest Valid Parentheses)
    LeetCode 141. 环形链表(Linked List Cycle)
    LeetCode 160. 相交链表(Intersection of Two Linked Lists)
    LeetCode 112. 路径总和(Path Sum)
    LeetCode 124. 二叉树中的最大路径和(Binary Tree Maximum Path Sum)
    LightGBM新特性总结
    sql service 事务与锁
    C#泛型实例详解
    C# 中的委托和事件(详解)
    C# DateTime日期格式化
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14102100.html
Copyright © 2011-2022 走看看