手动实现-React-Redux

50行代码实现Redux 核心功能

Redux 帮助你管理“全局”状态 – 那些应用程序的许多部分都需要的状态

redux的核心就是对数据状态进行管理，创建一个数据仓库

官方文档：https://www.reduxjs.cn/

Redux顺序分四大步：

初始化
订阅
发布
执行匹配和更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Redux</title>
	</head>
	<body>
		<button id="addto">加1</button>
	</body>

	<script>
		// 创建全局变量
		window.Redux = {};

		function createStore(reducer) {
			// state 是存储在store中的数据
			let state;
			let listeners = [];
			// 获取最新的state仓库内容
			function getState() {
				return state
			};
			// 订阅，发布 
			function subscribe(callback) {
				listeners.push(callback)
			};

			// reducer 修改state，接收参数action
			function dispatch(action) {
				// 更新仓库
				state = reducer(state, action);
				// 循环执行订阅过的subscribe函数回调
				for (let i = 0; i < listeners.length; i++) {
					let listener = listeners[i]
					listener()
				}
			};

			// 在store初始化的时候需要执行一次reducer
			state = reducer(state, {
				type: '@@init/redux.x.x.x'
			});

			let store = {
				getState,
				subscribe,
				dispatch
			};
			return store;
		};
		Redux.createStore = createStore;

		const initState = {
			milk: 0
		};
		
		// 执行 action 对应的type更新 state仓库
		function reducer(state = initState, action) {
			switch (action.type) {
				case 'PUTMILK':
					return {
						...state, milk: state.milk + action.count
					}
				case 'TAKE_MILK':
					return {
						...state, milk: state.milk - action.count
					}
				case '@@init/redux.x.x.x':
					return { ...state }
				default:
					return state
			}
		};
		
		
		
		// redux 的使用
		// 初始化
		let store = createStore(reducer);
		// 订阅，只要state发生改变 就会通知订阅者
		store.subscribe(() => console.log('仓库更新了',store.getState()));
		// 发布-执行
		store.dispatch({
			type: 'PUTMILK',
			count: 1
		});

		let dom = document.getElementById("addto");
		dom.onclick = () => {
			store.dispatch({
				type: 'PUTMILK',
				count: 1
			});
			console.log(store.getState())
		};
	</script>
</html>

玄机博客

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。