实例讲解Redux

2024年2月16日 205次阅读 来源: lybenson

实例讲解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);

最后

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

    原文作者：lybenson
    原文地址: https://segmentfault.com/a/1190000007515109
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞