对象(...)对于applyMiddleware(thunk.withExtraArgument({ getFirebase，getFirestore }))不是函数错误 - 腾讯云开发者社区

文章/答案/技术大牛

发布

理解 React 中的 Redux-Thunk

Redux Thunk 是一个中间件，它允许 Redux 返回函数而不是 actions。这就允许你在延迟处理 actions 的时候结合 promises 使用。...然后，我们可以使用 applyMiddleware() 开启： import { createStore, applyMiddleware } from 'redux'; import thunk from...而是，使用 setState 去更新一个对象的 state 状态。 Redux 使用 actions 和 reducers 去更新你应用的 state。...action 对象应该被返回，因为 action 是一个对象。Redux-thunk 允许一个 action creator 返回一个函数！现在，我们可以做任何异步工作。...中间件可以帮助你进行日志记录、错误报告、异步请求等。

1.3K2 0

阅读redux源码

，而这个这个对象的内部数据值必须是一个函数，不然会警告。...循环了一遍这个对象，得到一个新值，对象值全部是函数的一个新reducers var finalReducerKeys = Object.keys(finalReducers) if (process.env.NODE_ENV...，默认第二个参数就是中间件，并且默认state置为undefined 第二个判断的意思是当有中间件参数，但是中间参数类型不是function的时候，抛出一个非法错误，如果是函数，先执行中间件，退出。...后续在讲中间件是怎么执行的第三个判断reducer是否是函数，否则抛出错误退出 var currentReducer = reducer // 当前reducer var currentState...这个函数接收的参数在 applyMiddleware 里面能看到接收到的是dispatch方法这里巧妙的利用了js Array的reduce方法，reduce方法的原理就是回调函数的返回值作为后一个回调函数的第一个参数

1.1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

Redux源码解析系列（二） -- middleware 和 applyMiddleware

它主要做一件事：将上一次返回的函数赋值给store.dispatch 到了这一步，就该想想怎么把多个middle合进store里啦~ ，我们希望一个函数可以帮我们完成这件事，这样就可以直接使用applyMiddleware...但是有别的方式，那就是在middleware里不直接从store.dipatch里读取next函数，而是将next作为一个参数传入，在applyMiddleware里用的时候把这个参数传下去。...接下来，看一个实例，redux-thunk 的源码，我们知道，它用于异步API，因为异步 API action creator返回的是一个funciton，而不是一个对象，所以redux-thunk做的事情...getState, extraArgument) } return next(action) } } const thunk = createThunkMiddleware(); thunk.withExtraArgument...applyMiddleware，那就会直接返回这个，对于我们的applyMiddleware来说，就是直接把creatStore的权利放在了自己身上啊~ return enhancer(

9828 0

人人能读懂redux原理剖析_2023-02-23

store对象，我们来看下这部分的源码： // 主函数createStore // 返回一个store对象 export default function createStore(reducer, preloadedState...，否则抛出错误信息 if (!...// type属性是action对象必要的属性 // 如果传入的action没有type属性，则抛出错误信息 if (typeof action.type === 'undefined...getState, extraArgument); } return next(action); }; } const thunk = createThunkMiddleware(); thunk.withExtraArgument...，返回一个新函数 return funs.reduce((a,b) => (...args) => a(b(...args))) } applyMiddleWare import

7983 0

深度剖析github上15.1k Star项目：redux-thunk

} } } 以上代码我们可以发现我们用了一个统一的createAction来创建action，在调用时只需要执行Actions.start()即可，我们也知道action返回的是一个标准的对象...(reducers, middlewares); 所以说redux-thunk是被传入applyMiddleware方法中作为参数使用的，不难猜到applyMiddleware方法中一定有遍历执行参数的逻辑...，我们来看看applyMiddleware的核心源码： export default function applyMiddleware(...middlewares) { return function...getState, extraArgument); } return next(action); }; } const thunk = createThunkMiddleware(); thunk.withExtraArgument...= createThunkMiddleware; export default thunk; 没错，这就是redux-thunk的全部源码了，是不是很nice～。

9662 0

Redux异步解决方案之Redux-Thunk原理及源码解析

，在使用Redux-Thunk前我们dispatch的action必须是一个纯对象(plain object)，使用了Redux-Thunk后，dispatch可以支持函数，这个函数会传入dispatch...如果你不想写重复的action名字，你可以将这两个action抽取成action creator而不是直接dispatch一个对象: // actions.js export function showNotification...Thunk中间件对于简单项目，上面的方案应该已经可以满足需求了。但是对于大型项目，你可能还是会觉得这样使用并不方便。...而且他会将这些函数action“吃了”，所以不用担心你的reducer会接收到奇怪的函数参数。你的reducer只会接收到纯对象action，无论是直接发出的还是前面那些异步函数发出的。...我之前就告诉过你：只要使用了**Redux Thunk**，如果你想**dispatch**一个函数，而不是一个纯对象，这个中间件会自己帮你调用这个函数，而且会将**dispatch**作为第一个参数传进去

4K5 1

简析redux技术栈（一）：redux中间件

store.dispatch); // 等价于类似下面的形式 dispatch = middleWare1(middleWare2(middleWare3(dispatch))); 我们知道，经过第一步的初始化，对于...其实也是一个高阶函数。...applyMiddleware(middleware1, middleware2, middleware3)执行后，是一个接收createStore参数的函数。...getState, extraArgument); } return next(action); }; } const thunk = createThunkMiddleware(); thunk.withExtraArgument...从上面可以看出它也是一个中间件，它的逻辑就是允许你dispatch一个函数，当你 dispatch 一个函数的时候，就直接执行它，并传入了dispatch（注意这个是 dispatch 不是前面中间件提到的

7051 0

人人能读懂redux原理剖析

store对象，我们来看下这部分的源码：// 主函数createStore// 返回一个store对象export default function createStore(reducer, preloadedState...，否则抛出错误信息 if (!...// type属性是action对象必要的属性 // 如果传入的action没有type属性，则抛出错误信息 if (typeof action.type === 'undefined...dispatch, getState, extraArgument); } return next(action); };}const thunk = createThunkMiddleware();thunk.withExtraArgument...，中间件的使用方式是用applyMiddleWare把中间件作为参数传入createStore中，那么applyMiddleWare是如何实现的？

1.5K3 0

Redux源码解析系列（二） -- middleware 和 applyMiddleware

4202 0

react 同构初步（4）

redux-chunk传递axios对象在前面的实践中，我们用到了redux-chunk。...去看看它的源码： // node_modules/redux-chunk/src/index function createThunkMiddleware(extraArgument) { // 高阶函数...__context : {}; return createStore(reducer, defaultState, applyMiddleware(thunk.withExtraArgument...下的路由全部做转发处理： if(req.url.startWith('/api')){ // 转发9001 } // ... }); 但是这种面向过程编程的写法并不是最好的实践...document对象在server 层根本是不存在的。

2.4K1 0

第二十篇：从 Redux 中间件实现原理切入，理解“面向切面编程”

/reducers'; // 创建一个有 thunk 中间件加持的 store 对象 const store = createStore( reducer, applyMiddleware...这个过程单从表面上看，和普通 Redux 调用最大的不同就是：dispatch 的入参从 action 对象变成了一个函数。...dispatch 并非被“绕过”了，而是被“改写”了，改写它的不是别人，正是 applyMiddleware。关于这点，我会在本文后续的源码分析环节为你深入讲解。...若 action 是一个函数，那么 redux-thunk 就会执行它并且返回执行结果；若 action 不是一个函数，那么它就不是 redux-thunk 的处理目标，直接调用 next，告诉 Redux...2.3. compose 源码解读：函数的合成函数合成（组合函数）并不是 Redux 的专利，而是函数式编程中一个通用的概念。

8053 0

深入理解Redux之中间件(middleware)

理解redux的compose函数讲了这么久的reduce，这不是讲redux么？这就尴尬了，下面我们就来看看为什么要讲这个reduce函数。...我们去搜一下，看哪个地方会用到这个函数，在源码中找一下，发现在applyMiddleware.js中发现了这样的调用： export default function applyMiddleware(....applyMiddleware哟，我们在写中间件必须要用的函数。我们来看一下一个简单的middleware是怎样写的？...currentReducer(currentState, action); 这里的reducer是一个纯函数，接受的action必须为带有type字段的一个对象。所以你传个函数是个什么鬼？...那不是直接走switch的default了么？所以得到的state依旧是之前的state，没有任何改变。

1K11 0

React 没有中间件还能用吗？

这个概念并不是很新奇,以为在 Koa 里面早已经实现过了. 对比与原生的redux middleware , koa 的 middleware 差不多相当于是爸爸级的 level 了....in fact, compose 是一个非常基础的方法, 用来以函数式的编程来组合中间件, 在 koa 中我们也同样遇见过这样的写法. applyMiddleware 也是用到这样的方法的. so, 我们来具体看看...不过实话说, 真心没有 koa 里面的 compose 函数写得好, 你直接先写一个 noop 函数不行吗！！！ // 俺实际写了一个替换的compose....下面,我们来看一下重点,关于 redux-middleware 的核心方法, applyMiddleware. applyMiddleware 中间件由于这个中间件有点复杂, 对传入的函数有具体的要求...getState, extraArgument); } return next(action); }; } const thunk = createThunkMiddleware(); thunk.withExtraArgument

1.7K2 0

从头开始，彻底理解服务端渲染原理

const getStore = () => { return createStore(reducer, applyMiddleware(thunk)); } //客户端的store创建函数 export...不仅因为服务端渲染需要更加复杂的处理逻辑，还因为同构的过程需要服务端和客户端都执行一遍代码，这虽然对于客户端并没有什么大碍，但对于服务端却是巨大的压力，因为数量庞大的访问量，对于每一次访问都要另外在服务器端执行一遍代码进行计算和编译...但真实场景下，后端所给的数据格式并不是前端想要的，但处于性能原因或者其他的因素接口格式不能更改，这时候需要在前端做一些额外的数据处理操作。...(thunk.withExtraArgument(serverAxios))); } export const getClientStore = () => { const defaultState...(thunk.withExtraArgument(clientAxios))); } 现在Home组件中请求数据的action无需传参，actions.js中的请求代码如下： export const

2.7K2 0

源码共读-Redux

Redux是优秀的状态管理库，本节我们学习一下Redux源码，由于Redux源码是TypeScript写的，为了方便学习，本节去掉一些类型定义，转化为JavaScript来展示，另外对于错误信息我们这里就先不处理了...store对象，该对象有4个方法，如下： 1：dispatch：分发action，通过currentReducer(currentState, action)来生成新的state，并触发事件。...applyMiddleware实现由上createStore函数可知，当传入中间件的时候会通过enhancer来生成store。...middlewareAPI实际上就是中间件的第一层函数的参数store，这里需要注意的是dispatch调用的时候，下面的代码已经走完了，所以里面的dispatch函数是加强后的dispatch而不是上面定义的抛出异常的函数...compose核心逻辑是funcs.reduce((a, b) => (...args) => a(b(...args)))对于函数数组返回嵌套执行的组合函数，compose(...chain)(store.dispatch

4961 0

React saga_react获取子组件ref

前言 React的作用View层次的前端框架，自然少不了很多中间件（Redux Middleware）做数据处理, 而redux-saga就是其中之一，目前这个中间件在网上的资料还是比较少，估计应用的不是很广泛...，上述的数据流中，action是一个原始js对象（plain object）且reducer是一个纯函数，对于同步且没有副作用的操作，上述的数据流起到可以管理数据，从而控制视图层更新的目的。...这些Effect执行后，当函数resolve时返回一个描述对象，然后redux-saga中间件根据这个描述对象恢复执行generator中的函数。...通过使用Effect类函数，可以方便单元测试，我们不需要测试副作用函数的返回结果。只需要比较执行Effect方法后返回的描述对象，与我们所期望的描述对象是否相同即可。...username,password)=>{ dispatch({type:'TO_LOGIN_IN',username,password}); } 登陆事件的action为：TO_LOGIN_IN.对于登入事件的处理函数为

5.3K3 0

redux常用api的详解

这与 middleware 相似，它也允许你通过复合函数改变 store 接口。返回值保存了应用中所有state的对象，改变state的唯一方法是dispatch action。...Store 不是类。它只是有几个方法的对象。要创建它，只需要把根部的 reducing 函数传递给 createStore。...//所以，每个中间件在遇到不是自己处理范围之内的action的时候，会使用next(action)，将其传递给下一个中间件。...reduce() 对于空数组是不会执行回调函数的参数 array.reduce(function(total, currentValue, currentIndex, arr), initialValue...当前元素所属的数组对象。

1.4K2 0

React：Redux源码分析

utils/isPlainObject.js: 工具函数，判断是否是简单对象（通过 {} 或 new Object构造的对象）； utils/warning.js: 工具函数，用于向控制台打印警告信息；...这都不是重点.. ---- utils/actionTypes.js: 供Redux内部使用的2个Action常量定义； ---- applyMiddleware.js: Redux官方附带一个的...无需记忆各子模块的实际位置；值得借鉴； 2. utils/isPlainObject.js 3. utils/warning.js 非重点内容，热热身... util/isPlainObject.js: 判定一个JS对象是不是...7. combineReducers.js 对于Redux应用来说，只有一个Store、也只有一个Reducer；但随着应用变得越来越复杂，我们需要对 reducer 函数进行拆分，拆分后的每一块独立负责管理...8. applyMiddleware.js 9. compose.js 8.1 compose.js: compose实际上是一个函数式编程中的写法，表示从右向左组合多个函数。

1.1K2 0

Redux源码浅析

），这些变量被以闭包的形式存储成了函数的内部变量，然后把自己的内部函数打包暴露出去，打包的结果就是我们外部得到的store对象。...除此之外，就是为了对action有严格限制，必须是一个简单对象plainObject、必须要有type属性，这些都能保证reducer函数处理的时候拿到的action是预期的，可以放心的去执行纯函数。...图片还有个小细节，reducer执行时都会用isdispatching这个flag进行标记，限制执行其他的函数，比如dispatch本身，在isdispatching为true时会抛出错误。...：图片getState方法非常简短，除了抛出错误，就是直接返回currentState。...图片这部分代码稍微有些长（相对于其他的函数来说），但基本流程很简单：树形浅拷贝finalReducers校验finalReducers返回组合后的reducer combination：依次调用reducers

2K7 1

应用connected-react-router和redux-thunk打通react路由孤立

redux 在我们开发过程中，很多时候，我们需要让组件共享某些数据，虽然可以通过组件传递数据实现数据共享，但是如果组件之间不是父子关系的话，数据传递是非常麻烦的，而且容易让代码的可读性降低，这时候我们就需要一个...因为对于何时应该引入 Redux 这个问题，对于每个使用者和每个应用来说都是不同的。...组件不是一个“路由组件”，即组件并没有像这样渲染。...这里需要说明几点： fetchPosts返回了一个函数，而普通的 Action Creator 默认返回一个对象。...但是有一个问题，store.dispatch正常情况下，只能发送对象，而我们要发送函数，为了让store.dispatch可以发送函数，我们使用中间件——redux-thunk。

3K0 0

点击加载更多

理解 React 中的 Redux-Thunk

阅读redux源码

Redux源码解析系列（二） -- middleware 和 applyMiddleware

人人能读懂redux原理剖析_2023-02-23

深度剖析github上15.1k Star项目：redux-thunk

Redux异步解决方案之Redux-Thunk原理及源码解析

简析redux技术栈（一）：redux中间件

人人能读懂redux原理剖析

Redux源码解析系列（二） -- middleware 和 applyMiddleware

react 同构初步（4）

第二十篇：从 Redux 中间件实现原理切入，理解“面向切面编程”

深入理解Redux之中间件(middleware)

React 没有中间件还能用吗？

从头开始，彻底理解服务端渲染原理

源码共读-Redux

React saga_react获取子组件ref

redux常用api的详解

React：Redux源码分析

Redux源码浅析

应用connected-react-router和redux-thunk打通react路由孤立

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐