简易的redux createStore手写实现示例
更新时间：2022年10月24日 16:38:33 作者：默海笑
这篇文章主要介绍了简易的redux createStore手写实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
1.首先创建一个store
根目录创建一个store文件夹，下面创建一个index.js
import { createStore } from '../my-redux'
// 书写reducer函数
function reducer(state = 0, action) {
switch (action.type) {
case "add":
return state + 1;
case "inc":
return state - 1;
default:
return state;
}
}
// 使用createStore(reducer)创建store对象并且导出
const state = createStore(reducer);
export default state;
结合上面的代码分析
- 创建store是redux库的createStore函数接收一个reducer函数进行创建。
import { createStore } from '../my-redux'
- 先手写一个简单的reducer函数
// 书写reducer函数
状态值默认为0
function reducer(state = 0, action) {
switch (action.type) {
case "add":
return state + 1;
case "inc":
return state - 1;
default:
return state;
}
}
- 将创建的store导出
// 使用createStore(reducer)创建store对象并且导出 const state = createStore(reducer); export default state;
2.其次创建一个my-redux
- 将所有的函数都导入index.js
import createStore from './createStore'
export {
createStore
}
- 创建一个createStore.js
export default function createStore(reducer) {
let currentState; // 当前state值
let currentListeners = []; // store订阅要执行的函数储存数组
// 获得当前state值
function getState() {
return currentState;
}
// 更新state
function dispatch(action) {
// 传入action 调用reducer更新state值
currentState = reducer(currentState, action)
// 遍历调用订阅的函数
currentListeners.forEach((listener) => listener());
}
// 将订阅事件储存到currentListeners数组，并返回unsubscribe 函数来取消订阅
function subscribe(listener) {
currentListeners.push(listener);
// unsubscribe
return () => {
const index = currentListeners.indexOf(listener);
currentListeners.splice(index, 1);
};
}
dispatch({ type: "" }); // 自动dispatch一次，保证刚开始的currentState值等于state初始值
// 返回store对象
return {
getState,
dispatch,
subscribe,
}
}
可以根据上面给出的代码步步分析：
①明确createStore接收一个reducer函数作为参数。
②createStore函数返回的是一个store对象，store对象包含getState,dispatch,subscribe等方法。
- 逐步书写store上的方法
书写getState()方法
返回值：当前状态值
// 获得当前state值
function getState() {
return currentState;
}
书写dispatch方法
接受参数：action。
dispatch方法，做的事情就是：①调用reducer函数更新state。②调用store订阅的事件函数。
currentState是当前状态值，currentListeners是储存订阅事件函数的数组。
// 更新state
function dispatch(action) {
// 传入action 调用reducer更新state值
currentState = reducer(currentState, action)
// 遍历调用订阅的函数
currentListeners.forEach((listener) => listener());
}
书写subscribe方法
接受参数：一个函数 返回值：一个函数，用于取消订阅unsubscribe
// 将订阅事件储存到currentListeners数组，并返回unsubscribe 函数来取消订阅
function subscribe(listener) {
currentListeners.push(listener);
// unsubscribe
return () => {
const index = currentListeners.indexOf(listener);
currentListeners.splice(index, 1); // 删除函数
};
}
返回store对象
// 返回store对象
return {
getState,
dispatch,
subscribe,
}
特别注意：
初始进入createStore函数的时候，需要通过dipatch方法传入一个独一无二的action（reducer函数默认返回state）来获取初始的store赋值给currentStore。
可以结合下面reducer的default项和createStore方法调用的dispatch来理解
dispatch({ type: "" }); // 自动dispatch一次，保证刚开始的currentState值等于state初始值
// 书写reducer函数
function reducer(state = 0, action) {
switch (action.type) {
case "add":
return state + 1;
case "inc":
return state - 1;
default:
return state;
}
}
这样我们的createStore函数就已经完成了。那接下来就是检查我们写的这玩意是否起作用没有了。
3.创建一个Test组件进行检测。
老规矩先抛全部代码
import React, { Component } from 'react'
import store from './store' // 引入store对象
export default class Test extends Component {
// 组件挂载之后订阅forceUpdate函数，进行强制更新
componentDidMount() {
this.unsubscribe = store.subscribe(() => {
this.forceUpdate()
})
}
// 组件卸载后取消订阅
componentWillUnmount() {
this.unsubscribe()
}
// handleclick事件函数
add = () => {
store.dispatch({ type: 'add' });
console.log(store.getState());
}
inc = () => {
store.dispatch({ type: 'inc' });
console.log(store.getState());
}
render() {
return (
<div>
{/* 获取store状态值 */}
<div>{store.getState()}</div>
<button onClick={this.add}>+</button>
<button onClick={this.inc}>-</button>
</div>
)
}
}
1. 将Test组件记得引入App根组件
import Test from './Test';
function App() {
return (
<div className="App">
<Test />
</div>
);
}
export default App;
2. 将store引入Test组件
import React, { Component } from 'react'
import store from './store' // 引入store对象
3. 创建一个类组件，并且使用store.getState()获得状态值
<div>
{/* 获取store状态值 */}
<div>{store.getState()}</div>
<button onClick={this.add}>+</button>
<button onClick={this.inc}>-</button>
</div>
4. 书写对应的点击按钮
// handleclick事件函数
add = () => {
store.dispatch({ type: 'add' });
console.log(store.getState());
}
inc = () => {
store.dispatch({ type: 'inc' });
console.log(store.getState());
}
<div>
{/* 获取store状态值 */}
<div>{store.getState()}</div>
<button onClick={this.add}>+</button>
<button onClick={this.inc}>-</button>
</div>
这样是不是就可以实现了呢？哈哈哈，傻瓜，你是不是猛点鼠标，数字还是0呢？
当然，这里我们只是更新了store，但是并没有更新组件，状态的改变可以导致组件更新，但是store又不是Test组件的状态。
这里我们使用一个生命周期函数componentDidMount和store的订阅函数进行更新组件的目的，使用componentWillUnmount和store的取消订阅函数（订阅函数的返回值）。
// 组件挂载之后订阅forceUpdate函数，进行强制更新
componentDidMount() {
this.unsubscribe = store.subscribe(() => {
this.forceUpdate()
})
}
// 组件卸载后取消订阅
componentWillUnmount() {
this.unsubscribe()
}
好了。这里我们就真实实现了一个简单的createStore函数来创建store。
以上就是简易的redux createStore手写实现示例的详细内容，更多关于手写redux createStore的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了React-intl 实现多语言的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
Zustand是一个为React和浏览器环境设计的轻量级状态管理库,由Vercel开发,它特点包括轻量级、易用性、灵活性、可组合性和性能优化,支持多种状态管理模式和中间件,适合中小型项目,Zustand还支持TypeScript,提供类型安全的支持2024-09-09
通过React-Native实现自定义横向滑动进度条的 ScrollView组件
开发一个首页摆放菜单入口的ScrollView可滑动组件,允许自定义横向滑动进度条,且内部渲染的菜单内容支持自定义展示的行数和列数,在内容超出屏幕后,渲染顺序为纵向由上至下依次排列,对React Native横向滑动进度条相关知识感兴趣的朋友一起看看吧2024-02-02
这篇文章主要为大家介绍了react hooks深拷贝后无法保留视图状态解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
React Router 5.1.0使用useHistory做页面跳转导航的实现
本文主要介绍了React Router 5.1.0使用useHistory做页面跳转导航的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
解决antd的Table组件使用rowSelection属性实现多选时遇到的bug
这篇文章主要介绍了解决antd的Table组件使用rowSelection属性实现多选时遇到的bug问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了React组件性能最佳优化实践分享，React组件性能优化的核心是减少渲染真实DOM节点的频率，减少Virtual DOM比对的频率，更多相关内容需要的朋友可以参考一下2023-03-03
这篇文章主要介绍了在 React 中使用 Redux 的 4 种写法,Redux 一般来说并不是必须的，只有在项目比较复杂的时候，比如多个分散在不同地方的组件使用同一个状态，本文就React使用 Redux的相关知识给大家介绍的非常详细，需要的朋友参考下吧2022-06-06
这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要为大家介绍了React路由拦截模式及withRouter示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论