根据胡子大哈的文章学习，感谢大胡分享
胡子大哈-动手实现Redux
什么是Redux
Redux是一种前端架构模式，Flux架构的一种变种。
Redux与React-redux不是一个东西。Redux模式可以和很多种框架结合起来，比如vue、react。React-redux就是Redux与React结合起来的一个库，即Redux架构模式在React.js的体现。
从一个矛盾开始
矛盾：模块组件之间需要共享状态<————>状态可能被任意修改导致不可预料的结果
解决这个矛盾--思路
React.js的做法，将事情搞复杂，提高使用门槛，我们也用这个方法
手动实现Redux的代码
<body>
<div id="title"></div>
<div id="content"></div>
</body>
/*
* 思路——将事情变复杂：不可以直接修改数据，只能通过我允许的操作，而且修改的时候必须大张旗鼓的告诉我
* 通过createStore定义一个store，来进行状态管理，store具有以下属性：
* 首先要一个state存放共享状态。state状态的监听列表-listeners。
* 操作方法有：获取state对象-getState，添加监听函数-subscribe(listener)，执行action-dispatch(action)
* store
* {
* state
listeners
getState
subscribe
dispatch
reducer(外部传入)
// 会使用外部传入的reducer
* }
* reducer(state, action):1.初始化state。2.设置switch case,根据action，返回不同的新state。（具有共享结构的对象）
*
*/
/* 知识：
* 纯函数：一个函数的返回值只依赖于它的参数，并且在执行过程中没有副作用，就称函数为纯函数
* 优点：可靠，你传入什么，就传出什么
* 共享结构对象：最外层不是同一个对象，即新state和旧state不是同一个，内部前后不发生变化的部分指向同一个引用，发生变化的部分，指向不同的引用。
*/
/* 一个性能问题：不要全部渲染，改了哪一部分，就渲染哪一部分。
* 解决方法：1.渲染判断 2.共享结构的对象：es6语法 ...key
*/
/*
抽象 store 构建一个createStore函数，生成state和dispatch组合
观察者模式：监听列表，其中是各种处理函数。每次调用dispatch都会遍历监听列表
*/
function createStore (reducer) {
let state = null // state状态池
const listeners = [] // 监听列表
const subscribe = (listener) => listeners.push(listener) // 传入监听函数的方法
const getState = () => state // 获取当前state
const dispatch = (action) => {
state = reducer(state, action) // 覆盖原对象
listeners.forEach((listener) => listener()) // 每次dispatch都会遍历监听列表，等价于自动更新
}
dispatch({})
return { getState, dispatch, subscribe }
}
//dom操作方法
function renderApp (newAppState, oldAppState = {}) {
if (newAppState === oldAppState) return
console.log('1.App')
renderTitle(newAppState.title, oldAppState.title)
renderContent(newAppState.content, oldAppState.content)
}
function renderTitle (newTitle, oldTitle = {}) {
if (newTitle === oldTitle) return
console.log('2.1title')
const titleDom = document.getElementById('title')
titleDom.innerHTML = newTitle.text
titleDom.style.color= newTitle.color
}
function renderContent(newContent, oldContent = {}) {
if (newContent === oldContent) return
console.log('2.2content')
const contentDom = document.getElementById('content')
contentDom.innerHTML = newContent.text
contentDom.style.color = newContent.color
}
/* 这就是reducer 其实一个纯函数，不允许有副作用。
*
* 传入state,action.如果state存在，根据action返回一个新state。
* 如果state不存在，则进行初始化
* reducer的工作（不允许有副作用）：
* 1.初始化
* 2.计算新state
*/
// 原名：stateChanger
function themeReducer (state, action) {
if (!state) {
return {
title: {
text: "React.js小书",
color: "red",
},
content: {
text: "React.js小书内容",
color: "blur"
}
}
}
if (!action) {
console.log('无有效的action')
}
switch (action.type) {
case 'UPDATA_TITLE_TEXT':
return {
...state,
title: {
...state.title,
text: action.text
}
}
case 'UPDATA_TITLE_COLOR':
return {
...state,
title: {
...state.title,
color: action.color
}
}
default:
return state
}
}
// 生成store
const store = createStore(themeReducer)
let oldState = store.getState() // 缓存旧的state
store.subscribe(() => {
const newState = store.getState()
renderApp(newState, oldState)
oldState = newState
}) // 加入监听事件
renderApp(store.getState())
store.dispatch({type: 'UPDATA_TITLE_TEXT', text: '《React.js 小书》'})
store.dispatch({type: 'UPDATA_TITLE_COLOR', color: 'blue'})
网友评论