24行JavaScript代码实现Redux的方法实例


Posted in Javascript onNovember 17, 2019

前言

Redux是迄今为止创建的最重要的JavaScript库之一,灵感来源于以前的艺术比如Flux和Elm,Redux通过引入一个包含三个简单要点的可伸缩体系结构,使得JavaScript函数式编程成为可能。如果你是初次接触Redux,可以考虑先阅读官方文档。

1. Redux大多是规约

考虑如下这个使用了Redux架构的简单的计数器应用。如果你想跳过的话可以直接查看Github Repo。

1.1 State存储在一棵树中

该应用程序的状态看起来如下:

const initialState = { count: 0 };

1.2 Action声明状态更改

根据Redux规约,我们不直接修改(突变)状态。

// 在Redux应用中不要做如下操作
state.count = 1;

相反,我们创建在应用中用户可能用到的所有行为。

const actions = {
 increment: { type: 'INCREMENT' },
 decrement: { type: 'DECREMENT' }
};

1.3 Reducer解释行为并更新状态

在最后一个架构部分我们叫做Reduer,其作为一个纯函数,它基于以前的状态和行为返回状态的新副本。

  • 如果increment被触发,则增加state.count
  • 如果decrement被触发,则减少state.count
const countReducer = (state = initialState, action) => {
 switch (action.type) {
 case actions.increment.type:
  return {
  count: state.count + 1
  };

 case actions.decrement.type:
  return {
  count: state.count - 1
  };

 default:
  return state;
 }
};

1.4 目前为止还没有Redux

你注意到了吗?到目前为止我们甚至还没有接触到Redux库,我们仅仅只是创建了一些对象和函数,这就是为什么我称其为"大多是规约",90%的Redux应用其实并不需要Redux。

2. 开始实现Redux

要使用这种架构,我们必须要将它放入到一个store当中,我们将仅仅实现一个函数:createStore。使用方式如下:

import { createStore } from 'redux'

const store = createStore(countReducer);

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

store.dispatch(actions.increment);
// logs { count: 1 }

store.dispatch(actions.increment);
// logs { count: 2 }

store.dispatch(actions.decrement);
// logs { count: 1 }

下面这是我们的初始化样板代码,我们需要一个监听器列表listeners和reducer提供的初始化状态。

const createStore = (yourReducer) => {
 let listeners = [];
 let currentState = yourReducer(undefined, {});
}

无论何时某人订阅了我们的store,那么他将会被添加到listeners数组中。这是非常重要的,因为每次当某人在派发(dispatch)一个动作(action)的时候,所有的listeners都需要在此次事件循环中被通知到。调用yourReducer函数并传入一个undefined和一个空对象将会返回一个initialState,这个值也就是我们在调用store.getState()时的返回值。既然说到这里了,我们就来创建这个方法。

2.1 store.getState()

这个函数用于从store中返回最新的状态,当用户每次点击一个按钮的时候我们都需要最新的状态来更新我们的视图。

const createStore = (yourReducer) => {
 let listeners = [];
 let currentState = yourReducer(undefined, {});
 
 return {
  getState: () => currentState
 };
}

2.2 store.dispatch()

这个函数使用一个action作为其入参,并且将这个action和currentState反馈给yourReducer来获取一个新的状态,并且dispatch方法还会通知到每一个订阅了当前store的监听者。

const createStore = (yourReducer) => {
 let listeners = [];
 let currentState = yourReducer(undefined, {});

 return {
 getState: () => currentState,
 dispatch: (action) => {
  currentState = yourReducer(currentState, action);

  listeners.forEach((listener) => {
  listener();
  });
 }
 };
};

2.3 store.subscribe(listener)

这个方法使得你在当store接收到一个action的时候能够被通知到,可以在这里调用store.getState()来获取最新的状态并更新UI。

const createStore = (yourReducer) => {
 let listeners = [];
 let currentState = yourReducer(undefined, {});

 return {
 getState: () => currentState,
 dispatch: (action) => {
  currentState = yourReducer(currentState, action);

  listeners.forEach((listener) => {
  listener();
  });
 },
 subscribe: (newListener) => {
  listeners.push(newListener);

  const unsubscribe = () => {
  listeners = listeners.filter((l) => l !== newListener);
  };

  return unsubscribe;
 }
 };
};

同时subscribe函数返回了另一个函数unsubscribe,这个函数允许你当不再对store的更新感兴趣的时候能够取消订阅。

3. 整理代码

现在我们添加按钮的逻辑,来看看最后的源代码:

// 简化版createStore函数
const createStore = (yourReducer) => {
 let listeners = [];
 let currentState = yourReducer(undefined, {});

 return {
 getState: () => currentState,
 dispatch: (action) => {
  currentState = yourReducer(currentState, action);

  listeners.forEach((listener) => {
  listener();
  });
 },
 subscribe: (newListener) => {
  listeners.push(newListener);

  const unsubscribe = () => {
  listeners = listeners.filter((l) => l !== newListener);
  };

  return unsubscribe;
 }
 };
};

// Redux的架构组成部分
const initialState = { count: 0 };

const actions = {
 increment: { type: 'INCREMENT' },
 decrement: { type: 'DECREMENT' }
};

const countReducer = (state = initialState, action) => {
 switch (action.type) {
 case actions.increment.type:
  return {
  count: state.count + 1
  };

 case actions.decrement.type:
  return {
  count: state.count - 1
  };

 default:
  return state;
 }
};

const store = createStore(countReducer);

// DOM元素
const incrementButton = document.querySelector('.increment');
const decrementButton = document.querySelector('.decrement');

// 给按钮添加点击事件
incrementButton.addEventListener('click', () => {
 store.dispatch(actions.increment);
});

decrementButton.addEventListener('click', () => {
 store.dispatch(actions.decrement);
});

// 初始化UI视图
const counterDisplay = document.querySelector('h1');
counterDisplay.innerHTML = parseInt(initialState.count);

// 派发动作的时候跟新UI
store.subscribe(() => {
 const state = store.getState();

 counterDisplay.innerHTML = parseInt(state.count);
});

我们再次看看最后的视图效果:

24行JavaScript代码实现Redux的方法实例

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

原文: https://www.freecodecamp.org/news/redux-in-24-lines-of-code/

作者:Yazeed Bzadough

译者:小维FE

Javascript 相关文章推荐
父节点获取子节点的字符串示例代码
Feb 26 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
js获取url传值的方法
Dec 18 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 #Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 #Javascript
vue中注册自定义的全局js方法
Nov 15 #Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 #Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 #Javascript
微信小程序自定义导航栏(模板化)
Nov 15 #Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 #Javascript
You might like
PHP Mysql编程之高级技巧
2008/08/27 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
ExtJS 入门
2010/10/29 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python的设计模式编程入门指南
2015/04/02 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python中关于for循环的碎碎念
2017/06/30 Python
python爬虫超时的处理的实例
2018/12/19 Python
详解如何设置Python环境变量?
2019/05/13 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
提高python代码运行效率的一些建议
2020/09/29 Python
用python对excel查重
2020/12/07 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
家庭教育的心得体会
2014/09/01 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
解析redis hash应用场景和常用命令
2021/08/04 Redis