react-native添加redux支持

redux简介

redux是一个用于管理js应用状态的容器。redux出现时间并不是很长,在它出现之前也有类似功能的模块出现,诸如flux等等。redux设计的理念很简单,似乎最初这个开发团队就有让redux可以方便融入在server, browser, mobile client端的打算。目前在github上redux-*的第三方中间件、插件越来越多。如果react项目中想使用redux,那么就有react-redux插件来完成配合。

项目实例

如图所示,这是一个非常简单的例子:只有两个文件package.json和index.ios.js, 点击加1按钮数字值就会+1, 点击减1按钮数字值就会-1, 点击归零按钮则数字值置为0。

index.ios.js代码如下:

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

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 5 }
  }

  _onPressReset() {
    this.setState({ count: 0 })
  }

  _onPressInc() {
    this.setState({ count: this.state.count+1 });
  }

  _onPressDec() {
    this.setState({ count: this.state.count-1 });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.counter}>{this.state.count}</Text>
        <TouchableOpacity style={styles.reset} onPress={()=>this._onPressReset()}>
          <Text>归零</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.start} onPress={()=>this._onPressInc()}>
          <Text>加1</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.stop} onPress={()=>this._onPressDec()}>
          <Text>减1</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column'
  },
  counter: {
    fontSize: 50,
    marginBottom: 70
  },
  reset: {
    margin: 10,
    backgroundColor: 'yellow'
  },
  start: {
    margin: 10,
    backgroundColor: 'yellow'
  },
  stop: {
    margin: 10,
    backgroundColor: 'yellow'
  }
})

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

添加redux

1,要想使用redux的相关功能,首先需要添加redux相关依赖库。直接使用npm install 命令安装。默认情况下会将安装的信息保存到package.json里面。

"dependencies": {
    ...
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1"
},

2,创建actionsTypes.js用来定义所有的action名称, 定义三个常量action, 分别表示增加、减小、重置。

export const INCREASE = 'INCREASE';
export const DECREASE = 'DECREASE';
export const RESET = 'RESET';

actions.js代码如下:

import { INCREASE, DECREASE, RESET } from './actionsTypes';

const increase = () => ({ type: INCREASE });
const decrease = () => ({ type: DECREASE });
const reset = () => ({ type: RESET });

export {
    increase,
    decrease,
    reset
}

3,创建reducers.js, 根据需要在收到相关的action时操作项目的state。

import { combineReducers } from 'redux';
import { INCREASE, DECREASE, RESET} from './actionsTypes';

// 原始默认state
const defaultState = {
  count: 5,
  factor: 1
}

function counter(state = defaultState, action) {
  switch (action.type) {
    case INCREASE:
      return { ...state, count: state.count + state.factor };
    case DECREASE:
      return { ...state, count: state.count - state.factor };
    case RESET:
      return { ...state, count: 0 };
    default:
      return state;
  }
}

export default combineReducers({
    counter
});

4,创建store.js。

import { createStore, applyMiddleware, compose } from 'redux';
import createLogger from 'redux-logger';
import rootReducer from './reducers';

const configureStore = preloadedState => {
    return createStore (
        rootReducer,
        preloadedState,
        compose (
            applyMiddleware(createLogger())
        )
    );
}

const store = configureStore();

export default store;

至此,redux的几大部分都创建完毕, 下一步就是引入项目中。 5,在项目中引入上面的文件。创建app.js和home.js app.js代码如下:

import React, { Component } from 'righteact';
import { Provider } from 'react-redux';
import Home from './home';
import store from './store';

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Home/>
      </Provider>
    );
  }
}

修改home.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import { connect } from 'react-redux';
import { increase, decrease, reset } from './actions';

class Home extends Component {
  _onPressReset() {
    this.props.dispatch(reset());
  }

  _onPressInc() {
    this.props.dispatch(increase());
  }

  _onPressDec() {
    this.props.dispatch(decrease());
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.counter}>{this.props.counter.count}</Text>
        <TouchableOpacity style={styles.reset} onPress={()=>this._onPressReset()}>
          <Text>归零</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.start} onPress={()=>this._onPressInc()}>
          <Text>加1</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.stop} onPress={()=>this._onPressDec()}>
          <Text>减1</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  ...
})

const mapStateToProps = state => ({
    counter: state.counter
})

export default connect(mapStateToProps)(Home);

最后在index.ios.js添加app引入。

import { AppRegistry } from 'react-native';
import App from './app';

AppRegistry.registerComponent('Helloworld', () => App);

这样,我们就将redux引入到了React Native中。commond+R运行, command+D打开chrome浏览器调试, 可以看到redux-logger把每个action动作都打和state的前后变化印出来。

参考:深入理解redux

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端吧啦吧啦

手把手教你全家桶之React(二)

42980
来自专栏ShaoYL

iOS 蓝牙的GameKit用法

29050
来自专栏落影的专栏

iOS开发笔记(三)

前言 日常开发遇到的问题记录。 JSON Invalid type in JSON write (NSConcreteMutableData) 合法的j...

60250
来自专栏编程之旅

iOS开发——多线程完成短信获取按钮倒计时

现在的APP应用中,用手机获取短信验证码是非常常见的一个功能,而往往要求的效果就是在按下获取验证码之后,验证码的按钮开始倒计时,例如30秒后重新获取。而我们如何...

15940
来自专栏c#开发者

Asp.net dynamic Data web Site 之二创建第一个Web Site

Asp.net dynamic Data web Site 之二创建第一个Web Site 本专题介绍一个ASP.NET动态数据的网站的布局,其中包括这些文件...

46360
来自专栏青青天空树

nodejs构建多房间简易聊天室

  本服务器需要提供两个功能:http服务和websocket服务,由于node的事件驱动机制,可将两种服务搭建在同一个端口下。

35110
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第三天

324110
来自专栏一“技”之长

NSAlert组件应用总结 原

    在桌面软件开发中,当用户进行非法的操作或有风险的操作时,时长需要弹出警告框来提示用户。在OS X系统上,NSAlert是专门的警告框组件。其提供了简洁的...

12240
来自专栏文大师的新世界

4. Navigation实战

本来想写一个应用redux的Navigation实战,但是发现react-native有又新的更新,新手怕误导大家,就直接用了别人的组件,看看怎么应用吧。本次在...

9720
来自专栏iOS技术杂谈

NSNotificationCenter 通知的使用方法详解你要知道的KVC、KVO、Delegate、Notification都在这里

你要知道的KVC、KVO、Delegate、Notification都在这里 转载请注明出处 https://cloud.tencent.com/develop...

51760

扫码关注云+社区

领取腾讯云代金券