实例讲解Redux

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

最后

谢谢阅读，若是感受本文对你有用，那将是个人荣幸。若是有写的错误的地方也请留言指正。