实例解说Redux

2024年4月17日 160次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞