实例讲解Redux

roland_reed 发布于2019-08-20 12:21 / 1157人阅读

摘要：实例讲解示例代码地址在这里你可以通过命令到本地，也可以直接下载。之后便可以通过执行示例代码。下面结合实例中的内容理解上述概念。更改应用的状态通过方法将发送到函数中，进行状态的更新。分别用来处理页面和页面状态的更新。

实例讲解Redux

示例代码地址在这里 ,你可以通过git clone命令clone到本地，也可以直接下载。

然后通过执行npm install 安装所依赖的模块。之后便可以通过node 执行示例代码。

什么是Redux

随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。

简单来说Redux就是javaScript 的状态管理器。同时,Redux支持React、Angular、Ember、jQuery等。

到这里你可能并不知道该如何使用Redux，别着急，在了解如何使用之前，需要先理解相关的基本概念。示例代码可查看demo1/app.js

State

在一个可以进行用户交互的界面上，当我们触发了交互事件的时候，界面也会跟着进行更新。例如在一个app中的下拉刷新，当我们进行下拉刷新这个动作时，会去请求服务器数据，当返回结果时app的页面会更新。界面的改变我们就可以看做是状态的变化。而状态的变化是由于我们进行了某个动作。在Redux中，尤其需要注意的是State是只读的，且状态的变化只能通过Reducer函数进行转换，

Action

Action就是你与界面进行交互的行为。它是一个对象且必须要包含一个type属性，用来描述你要做的是什么事。

Store

Store就是应用状态的容器。用来维护应用的state、获取state、更新state、监听state变化等。这里需要注意的是整个应用只有一个Store

Reducer

一个纯函数，接收当前的state和一个action参数，根据当前的行为，即action的type属性返回一个新的state。状态的更新只能通过这个函数。

Talk is cheap, Show me the code!

可能看了上述内容你仍然不知道什么是Redux，Redux能干什么。下面结合实例demo1/app.js中的内容理解上述概念。

1.引入相关模块(这里没有使用ES6的方式是为了能使用node命令直接查看结果，node命令无法识别import。当然你也可以通过配置babel的方式使用import语法)

var { createStore } = require("redux");
//import { createStore } from "redux" //es6方式引入

2.定义Reducer,来进行状态的更新

var defaultState = "JavaScript"
function programLanguage(state = defaultState, action) {
    switch (action.type) {
        case "IOS":
            return action.language;
        case "WEB":
            return action.language;
        case "SNACK":
            return action.language;
        default:
            return state;
    }
}

从上述代码可以看到，我们定义了一个programLanguage方法，其实这就是一个Reducer,它接受了当前state和action参数。用来更新state。

3.创建store。

let store = createStore(programLanguage);

再次强调整个应用中只能有一个store，即createStore函数只能被调用一次。

createStore的定义如下:

function createStore(reducer, preloadedState, enhancer);

可以看到的是createStore接受三个参数

reducer：就是上述的reducer函数，这里不再赘述

preloadedState: 初始state

enhancer：组合store creator的高级函数,返回一个新的强化过的store creator。

4.更改应用的状态

store.dispatch({ type: "default" });
store.dispatch({ language: "Swift", type: "IOS" });
store.dispatch({ language: "Ruby", type: "WEB" });
store.dispatch({ language: "Python", type: "SNACK" });

通过dispatch方法将action发送到reducer函数中，进行状态的更新。

执行node demo1/app.js 的打印结果如下

JavaScript
JavaScript Swift
JavaScript Swift Ruby
JavaScript Swift Ruby Python

当执行第一句代码store.dispatch({ type: "default" });时返回的是JavaScript。是由于dispatch方法内部会调用在createStore中注册的Reducer函数，即programLanguage函数。由programLanguage的内部逻辑return的是一个defaultState。此时整个应用的状态为JavaScript

当执行第二句代码store.dispatch({ language: "Swift", type: "IOS" });时返回了JavaScript Swift。是由于type为IOS,programLanguage返回的是state + " " +action.language; 因为上一句代码将应用的状态变为了JavaScript，所以结果自然就是JavaScript Swift。同时整个应用的状态也会变成JavaScript Swift。

同理，第三句和第四句代码也是如此。

5.订阅状态的更新

store.subscribe(() =>
    console.log(store.getState())
);

为了方便查看状态的变化。这里调用了subscribe方法，每当状态发生变化时都会调用其回调函数。

store.getState() 获取应用的当前状态。

优化操作 Action creator

随着页面的增加，Action必然也会越来越多，如果Action内部所携带的消息也很多。此时如果需要状态的更新，就需要写复杂的Action，造成代码可读性差，文件臃肿。所以我们可以使用Action creator来构造Action。当需要进行状态更新就传入相应的数据到Action creator中生成Action并返回。

在demo2中

我们创建了一个HomeAction的文件专门用来存放Action Creator。在此文件中我们创建了三个Action creator，分别是action_ios、action_web、action_snack，并将创建Action的任务交给这三个函数。

与此同时在我们demo2/app.js中需要dispatch一个action的时候。只需要从Action creator中取出Action就行了。并不需要我们手动的去创建，如此一来便大大增加代码的可读性，可维护性。

分散Reducer

同样的随着业务量的增加，Reducer必定也会越来越大。所以我们可以按模块的不同来拆分Reducer。将一个大的Reducer拆分成几个小的reducer。

在demo3中reducer文件夹中，我们按照模块的不同的拆分homeReducer和profileReducer。分别用来处理home页面和profile页面状态的更新。

那么问题来了，这么拆分如何使用createStore去创建store呢，毕竟createStore只能传一个Reducer参数。而且createStore只能调用一次。

别着急，在redux中提供了一个combineReducers的方法，用来组合我们的Reducer。

const mainReducer = combineReducers({
    homeReducer,
    profileReducer
})
let store = createStore(mainReducer);

最后

谢谢阅读，如果感觉本文对你有用，那将是我的荣幸。如果有写的错误的地方也请留言指正。

云服务器 GPU云服务器实例讲解 Redux redux源码 redux-saga

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

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

实例讲解基于 React+Redux 的前端开发流程

摘要：宅印前端基于的模式开发，我们指定了一套分工明确的并行开发流程。下面通过一个苹果篮子实例，来看看整个应用开发流程。容器负责接收中的和并发送大多数时候需要和直接连接，容器一般不需要多次使用，比如我们这个应用的苹果篮子。前言：在当下的前端界，react 和 redux 发展得如火如荼，react 在 github 的 star 数达 42000 +，超过了 jquery 的 39000+，...

chaosx110 2019-08-19 18:25 评论0 收藏0
实例讲解react+react-router+redux

摘要：而函数式编程就不一样了，这是模仿我们人类的思维方式发明出来的。数据流在中，数据的流动是单向的，即从父节点传递到子节点。数据流严格的单向数据流是架构的设计核心。前言总括：本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用的过程。代码地址：Re...

RiverLi 2019-08-21 11:20 评论0 收藏0
dva框架使用详解及Demo教程

摘要：框架的使用详解及教程在前段时间，我们也学习讲解过框架的基本使用，但是有很多同学在交流群里给我的反馈信息说，框架理解上有难度，看了之后还是一脸懵逼不知道如何下手，很多同学就转向选择使用框架。 dva框架的使用详解及Demo教程在前段时间，我们也学习讲解过Redux框架的基本使用，但是有很多同学在交流群里给我的反馈信息说，redux框架理解上有难度，看了之后还是一脸懵逼不知道如何下手，很...

bergwhite 2019-08-23 11:47 评论0 收藏0
一篇文章总结redux、react-redux、redux-saga

摘要：编辑器顶层组件不就了吗这就是。官方提供的绑定库。具有高效且灵活的特性。在的中，可以使用或者等来监听某个，当某个触发后，可以使用发起异步操作，操作完成后使用函数触发，同步更新，从而完成整个的更新。不就ok了吗？这就是 react-redux。Redux 官方提供的 React 绑定库。具有高效且灵活的特性。 React Redux 将组件区分为容器组件和 UI 组件前者会处理逻辑...

April 2019-05-21 19:08 评论0 收藏0
redux-saga框架使用详解及Demo教程

摘要：通过创建将所有的异步操作逻辑收集在一个地方集中处理，可以用来代替中间件。 redux-saga框架使用详解及Demo教程前面我们讲解过redux框架和dva框架的基本使用，因为dva框架中effects模块设计到了redux-saga中的知识点，可能有的同学们会用dva框架，但是对redux-saga又不是很熟悉，今天我们就来简单的讲解下saga框架的主要API和如何配合redux框...

Nosee 2019-08-23 11:49 评论0 收藏0