加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

实例讲解Redux

发布时间:2020-12-15 08:20:14 所属栏目:百科 来源:网络整理
导读:实例讲解Redux 示例代码地址在这里,你可以通过 git clone 命令clone到本地,也可以直接下载。 然后通过执行 npm install 安装所依赖的模块 。之后便可以通过 node 执行示例代码。 什么是Redux 随着 JavaScript 单页应用开发日趋复杂, JavaScript 需要管理比

实例讲解Redux

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

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

什么是Redux

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

简单来说Redux就是javaScript 的状态管理器。同时,Redux支持ReactAngularEmberjQuery等。

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

State

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

Action

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

Store

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

Reducer

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

Talk is cheap,Show me the code!

可能看了上述内容你仍然不知道什么是ReduxRedux能干什么。下面结合实例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,它接受了当前stateaction参数。用来更新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。是由于typeIOS,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_iosaction_webaction_snack,并将创建Action的任务交给这三个函数。

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

分散Reducer

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

demo3reducer文件夹中,我们按照模块的不同的拆分homeReducerprofileReducer。分别用来处理home页面和profile页面状态的更新。

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

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

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

最后

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读