Redux 入门

miracledan 发布于2019-08-20 11:58 / 567人阅读

摘要：只要是同样的输入，必定得到同样的输出。纯函数是函数式编程的概念，必须遵守以下一些约束。中的概念执行的动作，包括动作所需要的数据，改变数据的唯一来源，一般是通过将传到。只是描述了有事情发生了这一事实，并没有指明应用如何更新。

1.什么是Redux

管理Web应用全局状态的框架。

单页面应用，顾名思义，和传统项目的最明显区别就是项目只有一个页面，页面有一个根元素，我们写的每一个页面是一个大的组件，前端接管路由来渲染不同的页面组件。

随着应用的复杂，前端需要存储更多的state，包括缓存的全局数据，本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。

如果是单纯的数据缓存也没什么需要考虑的东西，放到内存就可以了，重点是还要让state和view有绑定的关系。state的变化能够触发view的变化。

在我们的项目中，没有用redux之前，我们都是页面组件管理state，出现以下需求的时候，写起来就比较复杂

某个组件的状态，需要共享

某个状态需要在任何地方都可以拿到

一个组件需要改变全局状态

一个组件需要改变另一个组件的状态

2.Redux的原则和设计思想 2.1 三大原则

单一数据源：整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中

State 是只读的：惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改：为了描述 action 如何改变 state tree ，你需要编写 reducers。只要是同样的输入，必定得到同样的输出。
纯函数是函数式编程的概念，必须遵守以下一些约束。

不得改写参数
不能调用系统 I/O 的API
不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果

2.2 设计思想：

（1）Web 应用是一个状态机，视图与状态是一一对应的。

（2）所有的状态，保存在一个对象里面。

3.Redux中的概念 3.1 Action

执行的动作，包括动作所需要的数据，改变store数据的唯一来源，一般是通过store.dispatch() 将 action 传到 store。

Action 本质上是 JavaScript 普通对象。

flux-standard-action FSA标准

type，必须，string或者Symbol

payload，可选，执行action所需要的数据，任何类型

error,可选，标识这个action是否有错误，true or false

meta，可选，任何类型，payload之外的其他数据。

3.2 Reducer

根据action 做更新state的操作。

Action 只是描述了有事情发生了这一事实，并没有指明应用如何更新 state。而这正是 reducer 要做的事情。

3.3 Store

Store就是保存全局state的容器，保存三个常用的api

getState，获取当前的state

subscribe，给store变化添加监听函数

dispatch，用于接受action的方法，触发reducer和监听函数

3.4 单项数据流

用户通过View，dispatch 相应的action，store调用reducer获取最新的state，并触发通过subscribe订阅的监听函数，监听函数中我们通过store的getState方法获取最新的state，更新view。
工作流程图
)

4.应用实例

simpleredux/index.js

import {createStore} from "redux";
 
export function createAction(type, payload) {
    return {
        type,
        payload
    }
}
const initialState = {
    time: new Date().getTime()
}
 
function reducer(state = initialState, action) {
    switch (action.type) {
        case "NOW_TIME":
            return {
                ...state,
                time: action.payload
            }
        default:
            return state;
    }
}
 
let store;
export function getStore() {
    if(store) return store;
    return store = createStore(reducer);
}

TestRedux.js

"use strict";
 
import React, { Component } from "react";
 
import {
    StyleSheet,
    View,
    Text
} from "react-native";
import MtButton from "@scfe/react-native-button";
import {getStore, createAction} from "../../simpleredux/index";
const store = getStore();
class TestRedux extends Component {
    constructor(props) {
        super(props);
        let state = store.getState();
        this.state = {
            time: state.time
        };
        store.subscribe(()=>{
            let state = store.getState();
            this.setState({
                time: state.time
            });
        });
    }
 
    _sendAction() {
        let action = createAction("NOW_TIME", new Date().getTime());
        store.dispatch(action);
    }
    render() {
        return (
            
                {this.state.time}
                
                
            
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 40
    }
});
 
export default TestRedux;

私有云海外云主机 Redux redux源码 redux-saga react-redux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80726.html

react-redux插件入门

摘要：描述这个插件可以让我们的代码更加的简洁和美观。安装使用提供了两个重要的接口使用了这个插件，的和就可以忘记来，它们就用不着了。现在有美女个。可先查看我的redux简单入门 react-redux简介 react-redux是使用redux开发react时使用的一个插件，另外插一句，redux不是react的产品，vue和angular中也可以使用redux；下面简单讲解，如何使用rea...

Baaaan 2019-08-22 16:28 评论0 收藏0
Redux入门0x106: `react`、`vue`、`原生 js`集成`redux`

摘要：概述之前写的所有关于的文章都是纯粹的，是和框架无关环境无关的，所以我没有将和一起讲，为的是吧和分开，作为独立的个体来分析，提现的是一种思想，而不是一个思维定式。而现在我们可以尝试在中来使用了。 0x000 概述之前写的所有关于redux的文章都是纯粹的redux，是和框架无关、环境无关的redux，所以我没有将redux和react一起讲，为的是吧redux和react分开，作为独立...

BetaRabbit 2019-08-23 12:04 评论0 收藏0
Reactjs、redux的从入门到放弃、删库跑路示例

摘要：我的入门到放弃之路最近看到很多相关的问题跟讨论，越来越多的小伙伴喜欢这个框架了，同时也在看到了有些入门的小伙伴遇到了各种各样的问题，本人也是框架使用都一枚，公司是腾讯阿里平安三巨头合资的一家公司，分别上海深圳杭州北京广州等多个分部，前端人员 showImg(https://segmentfault.com/img/bVbhonB?w=1278&h=722); 我的react入门到放弃之...

Miracle 2019-08-20 17:43 评论0 收藏0
redux入门事例

摘要：中定义来各个要做的事情。代码定义把封装成一个方法，这样用的时候不用每次定义，避免出错入口文件封装成方法，方便下面的的订阅调用每当时，订阅的函数就会执行现在有机关枪把。通过的来触发，中订阅的事件就会执行。触发，获取的值。环境准备为了方便，这里使用create-react-app搭建react环境 create-react-app mydemo 弹出配置如果需要自定义react的配置...

cheng10 2019-08-22 16:28 评论0 收藏0
React-Redux 入门教程

摘要：具体了解此方法可以请戳这里最后把对象暴露给在主入口进行调用我们通过提供的顶层组件传入然后把要展示的写入顶层组件就行了，提供了整个全局的供所有的子组件进行调用具体代码实现请项目目录 showImg(https://segmentfault.com/img/bVTGs8?w=214&h=571); 整个项目目录分为图中所示： Redux分为{Action,Reducer,Store} 入...

xuweijian 2019-08-20 18:56 评论0 收藏0