前言
在reactjs的持续学习中，总有一些知识需要总结和复习深化，所以就产生了把学习的redux自己简单实现，主要参考了一些课程和一些文章
redux的简单使用
首先我们先看看redux的使用，看看实现那些功能
前提：已经安装好一个react工程，并已经运行成功，安装了redux插件
import { createStore } from 'ruedux'
// 创建reducer
function counter(state=0, action) {
switch (action.type) {
case '加一':
return state +1
case '减一':
return state - 1
default:
return state
}
}
// 创建store
let store = createStore(reducer)
// 订阅一个listener
function listener() {
let sum = store.getState()
console.log(`sum: ${sum}`)
}
store.subscribe(listener)
// 派发action
store.dispatch({type: '加一'})
store.dispatch({type: '加一'})
store.dispatch({type: '减一'})
从redux的使用可以看出，只有dispatch可以触发action，从而改变数据，可以使用subdescribe订阅一个listener，来监听数据的变化，从而获取到state变化后的数据，这样一个单入口单出口的我们自己该怎么实现呢？接下来我就简单的实现一下
实现自己的miniredux
首先在react工程的src目录里新建一个my-redux.js
// 创建一个出口函数createStore
export function createStore(reducer) {
// 定义当前的状态
let currentState
// 定义当前的listener集合
let currentListener
// 唯一获得当前状态的方法
function getState() {
return currentState
}
// 把所有的listener push到currentListener
function subscribe(listener) {
currentListener.push(listener)
}
// 触发action，使得state改变状态，并执行所有的listener和返回一个action
function dispatch(action) {
currentState = reducer(currentState, action)
currentListener.forEach(v => v())
return action
}
// 初始化state，使得state获取原始的值
dispatch({type: '@@redux-aaaaa'})
// 返回所有方法
return {getState, subscribe, dispatch}
}
这里我们已经简单的实现了redux的功能，如何使用？实际只要把import {createStore} from ‘redux’改为直接引用自己写的miniRedux即可
import { createStore } from './my-redux.js'
后面的使用和redux的使用一样
