react总结之自己实现一个简单的redux_react实现简单的redux-优快云博客

本文链接：https://blog.youkuaiyun.com/my_love_download/article/details/107501019

本文通过手写一个简易的Redux，帮助理解React项目中状态管理的核心原理。代码示例展示了如何定义状态、更改状态以及订阅状态变化，从而实现按钮点击增减数值的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在react的项目中,经常使用到redux来进行状态管理,项目中一般我选择使用react-redux!今天学习了一下自己实现一个简单的redux,来加深对react-redux的理解,代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>

<body>
<button onclick="store.dispatch({type: '-', num: 2})">-</button>
<span id="num">1</span>
<button onclick="store.dispatch({type: '+', num: 3})">+</button>
</body>
</html>  
<script>
const dom = document.querySelector('#num');
const countState = {
	count: 10
}

const changeState = (state,action) => {
	if(!state) {
		return countState
	}
	switch(action.type) {
		case '-':
			return {
				...state,
				count: state.count - action.num
			}
		break;
		case '+':
		return {
				...state,
				count: state.count + action.num
			}
		break;
		default:
		return state;
	}
}
const createStore = (changeState) => {
	let state = null;
	const getState = () => state;
	const listeners = [];
	const subscribe = (listener) => listeners.push(listener);
	const dispatch = (action) => {
		state = changeState(state, action);
		listeners.forEach(listener => listener());
	}
	// 默认值
	dispatch({})
	return {
		getState,
		dispatch,
		subscribe,
	}
}
//创建store统一管理状态
const store = createStore(changeState);
// 渲染函数
const render = (state)=> {
	dom.innerHTML = store.getState().count;
}
// 初次渲染
render(countState);
// 每次更新页面
store.subscribe(render);
</script>