2. 程式人生 > 實用技巧 >React Native 新增 Redux 支援

React Native 新增 Redux 支援

阿新 • • 發佈：2020-12-08

0x1 前言

之前寫的專案都是人家編寫好的腳手架，裡面包含專案所需的環境檔案，但由於有些東西用不到打包增加軟體體積，所以自己從頭搭建個環境。是基於 Native Base +react-navigation + Redux的reactNative腳手架，現在專案環境如下：

{
  "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-js
 
x-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

相關推薦

React Native 新增 Redux 支援

0x1 前言 之前寫的專案都是人家編寫好的腳手架，裡面包含專案所需的環境檔案，但由於有些東西用不到打包增加軟體體積，所以自己從頭搭建個環境。是基於 Native Base +react-navigation + Redux的reactNative腳手架，

react-create-app腳手架自定義新增less支援

需要自己配置webpackconfig 開啟資料夾根目錄命令列輸入npm run eject 安裝下載：cnpm run less less-loader -D (別忘了less-loader)

支援安卓和ios效果相同的react-native輪播圖,實現淘寶詳情頁banner的效果

# rn-bounces-swiper 實現淘寶詳情頁banner圖片輪播彈跳後跳轉的效果 支援安卓和ios效果相同的react-native輪播圖,實現淘寶詳情頁banner的效果。

React-Native 動態的新增或者刪除一個元件

先展現一下效果，請忽略介面的美醜問題。 使用的控制元件請參考react-native-paper

create-react-app新增對TypeScript支援

背景 最近一直在重構react專案，由於專案歷史原因，將之前parcel打包工具換成了webpack，並選擇了使用create-react-app作為專案開發腳手架。

react native中新增自定義字型

技術標籤：React Native 1、在專案根目錄下，建立資料夾assets/fonts，並且把所需要的字型檔案（.ttf）放進來,

WebStorm 外掛 React Native Console (RN助手) 現已支援簡體中文語言

經過不懈努力, 自主研發的RN助手外掛終於相對完美的支援簡體中文語言了. React Native Console/RN助手

react native 給View新增點選事件

react native 給View新增點選事件   http://www.voidcn.com/article/p-vijhprhu-buo.html 直接在View上繫結點選事件，是沒有用的。要使任何元素處理React-Native UI中的觸控/單擊事件,您需要將元素放在Touchab

React Native中ScrollView元件輪播圖與ListView渲染列表元件用法例項分析

本文例項講述了React Native中ScrollView元件輪播圖與ListView渲染列表元件用法。分享給大家供大家參考，具體如下：

node crawler如何新增promise支援

背景 最近在組內做一些爬蟲相關的工作，本來想自己簡單造個輪子的，但是經網友推薦後，採用了node-crawler，用了一段時間過後，確實滿足了我的絕大部分需求，但是其 api 卻不支援 promise，而且我還需要一些同步爬取

VS Code開發React-Native及Flutter 開啟無線區域網安卓真機除錯問題

筆者前段時間在做react-native開發，一直是有線連線安卓真機進行除錯的。有線除錯確實帶來諸多麻煩，因為在除錯過程中需要頻繁和手機進行互動，導致有時候資料線脫落，就不得不重新安裝debug apk，安裝一次應用的時間

React Native 實現熱更新並自動簽名打包功能

專案背景：手動link的安卓App 1.下載 react-native-code-push npm install --save react-native-code-push

react-native 環境搭建-windows

react-native 環境搭建-windows 步驟跟著官網走，其中與幾個注意點。 1、jdk一定要安裝好。java、javac、java -version指令要成功2、win10環境配置path時，需要用絕對路徑配置

VSCode搭建React Native環境

安裝 React Native Tools 在外掛市場搜尋 react 找到 React Native Tools 進行安裝： 建立的react-native的工程拖入vscode中

解決 React Native Android：app：validateSigningRelease FAILED 錯誤

RN 執行的時候報這個錯這咋辦:

react native

React Native 以下简称RN RN 框架原理 将jsx转成js，并解析编译后的js文件，接口通过不同端的bridge，操作native的API。呈现给用户看的是原生的效果。

Flutter vs React Native vs Native：深度效能比較

老孟導讀：這是老孟翻譯的付費文章，文章所有權歸原作者所有。 歡迎加入老孟Flutter交流群，每週翻譯2-3篇付費文章，精彩不容錯過。

React native 啟動報錯Execution failed for task ':app:processDebugResources'.

------------恢復內容開始------------ 報錯如下 > Task :app:processDebugResources FAILED Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.

react-native打包apk報錯

Task :voicesdk:verifyReleaseResources FAILED FAILURE: Build failed with an exception. * What went wrong:

React 中的 Redux 詳解：

Redux 安裝指令是： > yarn add redux react-redux Redux 中的核心是： store是應用的狀態管理中心，儲存著是應用的狀態（state），當收到狀態的更新時，會觸發視覺元件進行更新。