redux原理是什么
1.为什么要使用redux?
随着互联网的高速发展,我们的应用变得越来越复杂,进行导致我们的组件之间的关系也变得日趋复杂,往往需要将状态父组件 -> 子组件 -> 子子组件 -> 又或者只是简单的 父组件与子组件之间的props传递也会导致我们的数据流变得难以维护,因为二次开发者不在熟悉项目的情况下无法第一时间确定数据来源是由谁发起的。使用redux之后,所有的状态都来自于store中的state,并且store通过react-redux中的Provider组件可以传递到Provider组件下的所有组件,也就是说store中的state对于Provider下的组件来说就是全局的。
2.redux的核心原理是什么?
1.将应用的状态统一放到state中,由store来管理state。
2.reducer的作用是返回一个新的state去更新store中对用的state。
3.按redux的原则,UI层每一次状态的改变都应通过action去触发,action传入对应的reducer 中,reducer返回一个新的state更新store中存放的state,这样就完成了一次状态的更新
4.subscribe是为store订阅监听函数,这些订阅后的监听函数是在每一次dipatch发起后依次执行
5.可以添加中间件对提交的dispatch进行重写
3.redux的api有哪些?
1.createStore 创建仓库,接受reducer作为参数
2.bindActionCreator 绑定store.dispatch和action 的关系
3.combineReducers 合并多个reducers
4.applyMiddleware 洋葱模型的中间件,介于dispatch和action之间,重写dispatch
5.compose 整合多个中间件
接下来我们来依次实现createStore、bindActionCreator、combineReducers、
applyMiddleware、compose
createStore的实现
function createStore (reducer, enhancer) {
if (enhancer) {
enhancer(createStore)(reducer)
}
let currentState = {} //这就是前面提到的store管理的state
let currentListener = [] //这是前面提到的为store添加监听函数
function subscribe (func) {
currentListener.push(func)
}
function getState () {
return JSON.parse(JSON.stringify(state));
}
funtion dispatch (action) {
currentState = reducer(currentState, action)
currentListener.map(listen => listen()) //每当发生依次dispatch后都会遍历监听函数并执行
return action
}
return {
subscribe,
getState,
dispatch
}
}
注意: createStore并没有直接返回store中存放的state,而是返回一个函数getState来获取state,当我们调用getState去获取state时,需要返回一个state的复制品,也就是需要返回一个深拷贝state之后对象,这样可以避免state值的非法篡改,因为如何直接返回state的话,只需通过state[key] = xxxx就能对state进行修改,违背了redux只能通过dispatch(action)去更新state
bindActionCreator的实现
function bindActionCreator (creators, dispatch) {
let bound = {}
Object.keys(creators).map(key =>{
const creator = creators[key]
bound[key] = (..args) => dispach(creator(...args))
})
return bound
}
bindActionCreator是为action函数外面包一层dispatch,这样在进行action发起时无需再手动dispatch了
combineReducers的实现
function combineReducers (reducers) {
const reducersKeys = Object.keys(reducers),
finalReducers = {}
for (let i = 0; i < reducerKeys.length; i++) {
if (typeof reducers[i] === 'function') {
finalReducers[i] = reducers[i]
}
}
const finalReducersKeys = Object.keys(finalReducers)
return function combination (state={}, action) {
let hasChanged = false,
nextState = {}
for (let i = 0; i < finalReducersKeys.length; i++) {
const key = finalReducersKeys[i],
reducer = finalReducers[key],
preStateKeys = state[key],
nextStateKeys = reducer(preState, action),
nextState[key] = nextStateKeys
hasChanged = hasChanged || preStateKeys !== nextStateKeys
}
return hasChanged ? nextState : state
}
}
applyMiddleware的实现
function applyMiddleware (...middlewares) {
return createStore => (...args) => {
const store = createStore(...args)
let { getState, dispatch } = store
const middlewateApi = {
getState,
dispatch: (...args) => dispatch(...args)
}
const middlewareChain = middlewares.map(middleware => middlware(middlewareApi))
dispatch = compose(...middlewareChanin)(dispatch)
return {
store,
dispatch
}
}
}
compose的实现
function compose (...funcs) {
if(funcs.length === 0) {
return args => args
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce( (ret, item) => (...args) => ret(item(...args)) )
}
compose是整合多个中间件的情况,这里使用reduce对用传入的中间件进行累加执行
相关文章
- 激光雷达:测距原理
- 微信二维码登录的原理是什么_请使用微信扫描二维码登录
- 一篇文章带你彻底掌握线程池原理
- 零信任是什么原理?如何组网低成本实现异地协同办公
- 写过自定义指令吗,原理是什么?
- 用c语言编写贪吃蛇要会什么_c语言贪吃蛇原理
- ES读写原理
- 补码运算加减乘除原理是什么_计算机组成原理补码乘法运算
- fork join原理_典型相关分析
- 布隆过滤器的原理_什么是布隆过滤器
- 基于麦克风阵列的现有声源定位技术有_阵列原理
- feign原理详解_vip视频解析是什么原理
- Feign原理_feign基于什么协议
- dubbo原理详解_dubbo的作用
- React的diff算法原理-面试版
- 从源码角度看React-Hydrate原理
- 从源码角度看React-Hydrate原理_2023-02-14
- 【Java 虚拟机原理】Class 字节码二进制文件分析 二 ( 常量池位置 | 常量池结构 | tag | info[] | 完整分析字节码文件中的常量池二进制数据 )
- 套接字是什么,套接字通信及其原理
- 深入探究:Linux中fork子进程的工作原理(linuxfork子进程)
- MSSQL连接Oracle的步骤及原理(mssql链接orcl)
- Oracle事务原理与优势(oracle事物是什么)
- Oracle中回滚操作的含义及原理(oracle中回滚是什么)