Samoy的小窝

千里之行,始于足下 万行代码,始于指下

一只默默工作的程序猿


欢迎光临Samoy的小窝

初始Redux

先来看下通过Redux实现的实例吧:效果图

这个Demo的功能很简单,通过三个按钮实现<Text></Text>组件的文本变换,当点击”增加”按钮时,我们会新增一篇”日记”,内容为”This is a new article.”, 当点击”修改”时,”日记”会更改为”This article is modified.”,当点击”删除”按钮时,会将这篇”日记”删除,文本会设置为空字符串。

然后我们再看以下具体是怎么实现的吧:

  1. 首先Redux的思想是将数据也页面分离,因此只有大型的项目需要使用,小型的项目没必要使用。
  2. 了解Redux需要了解action,state,reducers和store的概念,关于这些概念可以前往redux官网了解,再此我就不再深入研究了。
  3. 说一下我理解的他们之间的关系: store用来储存reducers,reducers用来储存每一个reducer,而reducer则使用函数(这个函数只有两个参数,第一个是state,第二个是action)来处理action,根据action不同的type返回不同的state,而action是将数据传递到store的唯一来源。

接下来我们通过代码来具体分析一下:

项目的目录结构如下: 目录结构

首先我们需要创建action(actions/NoteAction.js),源码如下:

//这个NoteTypes里面均为常量
import *as Types from '../constants/NoteTypes';

export function add() {
    return {
        type: Types.ADD
    };
}

export function del() {
    return {
        type: Types.DELETE
    };
}

export function update() {
    return {
        type: Types.UPDATE
    };
}

接下来创建reducer(reducers/NoteReducer.js),源码如下:

import *as types from '../constants/NoteTypes';

let initialState = {
    text: ''
};

export default function operate(state = initialState, action) {
    switch (action.type) {
        case types.ADD:
            console.log("新添加了一篇文章");
            return {
                ...state,
                text: "This is a new article."
            };
        case types.DELETE:
            console.log("这篇文章被我删了");
            return {
                ...state,
                text: ""
            };
        case types.UPDATE:
            console.log("这篇文章被我删了");
            return {
                ...state,
                text: "This article is modified."
            };
        default:
            return state;
    }
};

若有多个reducer,则需要将reducer连接起来(reducers/index.js),如下:

import {combineReducers} from 'redux';
import operate from './NoteReducer';

let rootReducer = combineReducers({
    operate: operate
});
export default rootReducer;

然后我们来看App(App.js)页面里是怎么写的:

import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {createStore} from "redux";
import rootReducer from "./app/reducers";
import Root from "./app/pages/Root";

type Props = {};

//创建store来储存诗句
const store = createStore(rootReducer);

export default class App extends Component<Props> {
    render() {
        //在<Provider>组件中将store传递下去
        return (
            <Provider store={store}>
                <Root/>
            </Provider>
        );
    }
}

再看Root(Root.js)页面,在这个页面来接收数据:

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Button
} from 'react-native';
import * as NoteAction from "../actions/NoteAction";
import {connect} from "react-redux";

class Root extends Component {
    render() {
        let {text, add, update, del} = this.props;
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    {text}
                </Text>
                <Button title="增加" onPress={add}/>
                <View style={styles.gap}/>
                <Button title="修改" onPress={update}/>
                <View style={styles.gap}/>
                <Button title="删除" onPress={del}/>
            </View>
        )
    }
}

//通过connect这个函数来执行相关的操作,关于connect这个函数的详细解释参见:
//https://github.com/reactjs/react-redux/blob/master/docs/api.md#connect
export default connect(
    state => ({
        text: state.operate.text
    }),
    dispatch => ({
        add: () => dispatch(NoteAction.add()),
        update: () => dispatch(NoteAction.update()),
        del: () => dispatch(NoteAction.del())
    })
)(Root)

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    gap: {
        marginTop: 12
    }
});

至此,整个项目算是完成了,当然这只是最初级的使用,限于作者水平,并不能保证正确。有异议的地方,可以通过博客提供的联系方式和我联系,我们共同交流。
Demo源码在此:https://github.com/Samoy/ReduxDemo
这里有官网的其他案例:http://www.redux.org.cn/docs/introduction/Examples.html,有兴趣的话可以自行研究。

最近的文章

Android的三种动画

先看一下动画的效果:Android的动画分为三种,分别为帧动画、补间动画和属性动画。下面说一下各种动画的特点。1. 帧动画帧动画就是指将图片逐帧的播放出来,在src/main/res/drawable目录下添加animation_frame.xml文件(xml实现方式,实现红、绿、蓝、的切换):<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.androi...…

更早的文章

Redis基本命令用法

一、String概述:String是redis最基本的类型,最大能存储512MB的数据,String类型是二进制安全的,即可以存储任何数据,比如数字、图片、序列化对象等。 设置 设置键值 set key value 设置键值以及过期时间 setex key time value 设置多个键值 mset key value [key valu...…