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 相关文章推荐
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
$.extend 的一个小问题
Jun 18 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
看了就知道什么是JSON
2007/12/09 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
python实现linux下使用xcopy的方法
2015/06/28 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
python语言是免费还是收费的?
2020/06/15 Python
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
PHP笔试题
2012/02/22 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
先进集体申报材料
2014/12/25 职场文书