实现自己的miniredux

前言

在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的使用一样