嗯,咱们都知道 redux
一般是 react
项目中 中一种管理数据的手段,它跟咱们 vue
项目里的 Vuex
状态管理相似,功能相同,可是使用方法却有不一样~vue
最近在学习 redux
这一块,为了更好的帮助跟我同样的萌新更加深刻的了解 redux
的内部原理,咱们就来试试,手动实现一个简单的 redux
状态管理。react
不一样的是,咱们是在 vue
项目中来实现的~git
咱们要实现 redux
,首先要给本身定个小目标,也就是一个业务场景,咱们呀,也别想那么复杂,就以最简单的仍是最经典的计数器开始,如图:github
看图,你们就应该很清楚作什么,当我点击加号按钮,但愿仓库里的数据能增 1,点击减号按钮,但愿仓库里的数据能减 1 ,嗯,很明确的需求,咱们就来看看怎么实现吧~redux
首先咱们须要在src
目录下建立一个redux
目录,用来放咱们redux
的核心代码,其中最核心的代码就是 createStore
方法了,由于咱们在初始化 store
的时候就是经过这个方法进行建立的,redux
源码里它会返回 dispatch
、subscribe
、getState
、replaceReducer
四个方法,可是实际上咱们一般用到的就是前三个了~bash
ok,咱们接下来慢慢的来实现~app
在redux
目录下建立一个index.js
,代码以下:框架
// index.js
function createStore () {
let state ;
//分发action
let dispatch = ()=>{
}
//订阅数据更新
let subscribe = ()=> {
}
//获取store的状态
let getState = ()=>{
}
return{
dispatch ,
subscribe ,
getState
}
}
export {
createStore
}
复制代码
这样咱们就有了一个 redux
雏形,接下来主要是完善里面的方法而已~函数
咱们先把这个 store
挂载到 vue
的原型上,方便后面的使用,咱们在src
建立一个store
文件夹,并新建一个index.js
,代码以下:学习
import { createStore } from "../redux"
const store = createStore();
export default store;
复制代码
咱们在入口文件 main.js
引入,并挂载便可:
import store from './store'
Vue.prototype.$store = store;
复制代码
接着,若是在页面中打印 this.$store
,出现以下结果,则证实呢已经挂载成功了~
可是此时,并无什么实际的功能,由于咱们并无完善咱们的 createStore
里方法~
使用过 redux
的同窗都知道,咱们在初始化 store
, 也就是调用 createStore
的时候是须要传递一个reducers
参数的,用来写入更改状态的处理逻辑,咱们这里以计数器为例,将计数器 的 reducer
做为入参~
这里我将计数器相关actions
、constants
、reducer
直接贴代码了,就不在赘述了~
constants counter.js
// 常量定义
export const ADD = 'add';
export const MINUS = 'minus'
复制代码
actions counter.js
import * as constants from '../constants/counter'
//增长
export const add = ()=>({
type : constants.ADD
})
//减小
export const minus = ()=>({
type : constants.MINUS
})
复制代码
reducers counter.js
import * as constants from '../constants/counter'
const defaultState = {
count: 0
}
export default (state = defaultState, action) => {
switch ( action.type ) {
case constants.ADD :
return {
...state ,
count : state.count + 1
}
case constants.MINUS :
return {
...state ,
count : state.count - 1
}
default :
return state;
}
}
复制代码
dispatch
咱们指望,咱们点击加号的时候,会派发一个add
的action
,而后对应的 reducer
接收到 action
作对应的处理,减号按钮同理~
顺着这个思路,咱们先来看看 dispatch
方法,须要接受一个参数 action
,action
必须是一个对象,必须包含一个 type
值,代表须要 action
的类型,而后咱们能够经过传过来的 recuder
获取到新的状态,所以,dispatch
方法以下:
//分发action
let dispatch = (action)=>{
//判断 action 的 type 值
if( typeof action !== 'object') throw Error('Expected the action to be a object.');
if( action.type === undefined ) throw Error('The action.type is not defined');
//获取新的 state
state = reducer(state, action);
}
复制代码
咱们打印 state
, 经过点击 加号 和 减号 按钮,能够看到 state
确实有变换,跟咱们预期的同样~
getState
咱们能够经过 getState()
方法获取当前 state
,所以该方法相对比较简单,以下~
//获取store的状态
let getState = () => state;
复制代码
这样咱们在每次派发 action
的后,经过 getState
方法确实能获取到对应的状态~
但其实有个问题,咱们初始获取 state
的时候会返回 undefined
,由于咱们初始的时候只是定义了 state
, 却没有赋值~
为了解决这个问题,咱们能够在 初始化的时候 dispatch
一个 init
的 action
,这样会返回 reducer
中默认的 state
,即:
//初始化state
dispatch({ type : '@@redux/INIT'});
//获取store的状态
let getState = () => state;
复制代码
subscribe
虽然咱们如今经过按钮,在控制台打印出每次 count
的变化,可是并无反馈到页面上,由于页面上咱们的值并无作更改~
为了监控数据变化后作对应的处理,redux
提供了一个叫 subscribe
,它的入参是一个函数,做用就是订阅数据变化,作对应的逻辑处理,返回一个函数,用来取消订阅,所以咱们能够对 subscribe
函数作以下处理:
//订阅处理函数
let listeners = [];
//订阅数据更新
let subscribe = (fn)=> {
listeners.push(fn);
return ()=>{
listeners = listeners.filter(listener => fn != listener );
}
}
复制代码
注意,上面只是订阅,当咱们数据变化的时候须要发布,即要循环 listeners
中的方法,依次执行,所以须要在 dispatch
方法的最后加上一句:
listeners.forEach(listener => listener());
复制代码
效果
接着咱们来试试~
代码以下:
<template>
<div class='wrapper'>
<div class="">计数器:{{ number }}</div>
<div class="btn-box">
<button class="btn" @click="handleAddBtnClick">+</button>
<button class="btn" @click="handleMinusBtnClick">-</button>
</div>
<div class="btn-box">
<button class="btn" @click="handleRemoveListenerBtnClick">取消打印监听</button>
</div>
</div>
</template>
<script>
import { add , minus } from '../actions/counter'
export default {
data(){
return{
number : this.$store.getState().count ,
consoleHandler : null
}
},
methods : {
//计数器加一
handleAddBtnClick(){
this.$store.dispatch(add())
},
//计数器减一
handleMinusBtnClick(){
this.$store.dispatch(minus())
},
//取消打印事件监听
handleRemoveListenerBtnClick(){
this.consoleHandler();
}
},
mounted () {
//数据更新事件
this.$store.subscribe(()=>{
this.number = this.$store.getState().count;
})
//打印事件
this.consoleHandler = this.$store.subscribe(()=>{
console.log('个人值发生了更改~')
})
}
}
</script>
<style scoped>
.wrapper{
padding: 30px 15px;
text-align: center;
}
.btn-box{
margin-top: 20px;
}
.btn{
display: inline-block;
font-size: 20px;
min-width: 50px;
text-align: center;
margin: 0 10px;
}
</style>
复制代码
咱们在初始的时候 添加了两个 事件监听,一个用来更新 number
的值,另外一个用来打印,咱们每次数据变动都会触发这两个方法,当咱们点击取消打印监听按钮的时候,以后的数据变化不会在触发打印操做~
本身动手试试~
combineReducers
到此,咱们已经基本实现了一个 简单版 的 redux
,可是还不够完美,问题在于咱们还差一个函数,叫 combineReducers
, 它是用来合并多个 reducer
返回一个新的 reducer
,以此区分不一样的状态~
咱们在刚才的 redux
文件夹下的 index.js
添加这个方法,以下:
// 合并reducer
// key是新状态的命名空间 值是reducer,执行后会返回一个新的reducer
function combineReducers (reducers) {
// 第二次调用reducer ,内部会自动的把第一次的状态传递给reducer
return (state = {}, action) => {
// reducer默认要返回一个状态
let newState = {}
for (let key in reducers) {
// 默认reducer俩参数 一个叫state,一个叫action
let s = reducers[key](state[key], action);
newState[key] = s;
}
return newState;
}
}
复制代码
接着,将咱们的reducer
更换一下便可,这里就不在赘述了~
经过上面的学习,咱们手动实现了一个redux
,虽然比较简单,核心代码不多,但起码功能是完善的,主要是学习一种编码的思想吧,咱们能够在学习一些框架或者库的同时能够多去关注,它的内部实现,而后咱们开始能够本身一步一步模仿一个简单的版本,后面在不停的拓展,但愿和你们一块儿继续加油~
代码我也上传到github上了,有须要的小伙伴能够参考参考~