react-redux with thunk - getState不是一个函数 - 腾讯云开发者社区

文章/答案/技术大牛

发布

前端模块化开发--React框架（四）：高级应用（redux）

: redux是专门做状态管理的独立第3方库, 不是react插件作用?...: 对应用中状态进行集中式的管理(写/读) 开发: 与react-redux, redux-thunk等插件配合使用二、redux相关API redux中包含: createStore(), applyMiddleware...(), combineReducers() store对象: getState(), dispatch(), subscribe() react-redux: , connect(...(异步action), 需要引入redux-thunk才可以 reducer 根据老的state和指定的action, 返回一个新的state 不能修改老的state store...下载依赖包 Code npm install --save react-redux 理解 1)一个react插件库 2)专门用来简化react应用中使用redux React-Redux将所有组件分成两大类

1.6K2 0

Redux 入门到高级教程

可以定义一个函数来生成 Action，这个函数就叫 Action Creator。...store.subscribe方法返回一个函数，调用这个函数就可以解除监听。...中间件 redux-thunk中间件改造了redux的dispatch方法允许我们用store.dispatch(fn), fn可以是一个函数。...而且此函数可以接受两个参数：dispatch、getState做为参数。...它可以是一个函数，也可以是一个对象。如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。

3.3K3 0

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

是的

没有找到

react-05

: redux是专门做状态管理的独立第3方库, 不是react插件作用?...: 对应用中状态进行集中式的管理(写/读) 开发: 与react-redux, redux-thunk等插件配合使用 # 2. redux相关API redux中包含: createStore...(), applyMiddleware(), combineReducers() store对象: getState(), dispatch(), subscribe() react-redux...(异步action), 需要引入redux-thunk才可以 reducer 根据老的state和指定的action, 返回一个新的state 不能修改老的state...使用redux及相关库编码需要引入的库: redux react-redux redux-thunk redux-devtools-extension

6023 0

Redux快速上手

Store Store主要有四个方法： getState()：获取当前的state dispatch(action)：发出一个action subscribe(listener)：添加一个监听器 createStore...(reducer, [preloadedState], [enhancer])：创建store 在创建一个Store时可以添加中间件，如redux-thunk用于异步获取数据，redux-devtools-extension...' import thunk from 'redux-thunk' const middleware = [ thunk ] if (process.env.NODE_ENV !...react-redux react-redux只有两个API。 react使用react-redux来绑定redux。...当store或ownProps发生变化时，mapStateToProps()函数会被调用，得出一个新的state，传递给App组件。

1.8K2 2

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

Redux-Thunk和前面写过的Redux和React-Redux其实都是Redux官方团队的作品，他们的侧重点各有不同: Redux：是核心库，功能简单，只是一个单纯的状态机，但是蕴含的思想不简单...你也不能仅仅使用connect()来绑定action creator，因为showNotificationWithTimeout()并不是一个真正的action creator，他返回的也不是Redux...我之前就告诉过你：只要使用了**Redux Thunk**，如果你想**dispatch**一个函数，而不是一个纯对象，这个中间件会自己帮你调用这个函数，而且会将**dispatch**作为第一个参数传进去...thunk是一个可以dispatch的函数，所以我们需要改写dispatch让他接受函数参数。...根据我们前面讲的，thunk是一个函数，接收dispatch getState两个参数，所以我们应该将thunk拿出来运行，然后给他传入这两个参数，再将它的返回值直接返回就行。

4K5 1

Reduxreact-reduxredux中间件设计实现剖析

二. react-redux的实现上文我们说到，一个组件如果想从store存取公用状态，需要进行四步操作：import引入store、getState获取状态、dispatch修改状态、subscribe...，这个高阶函数接收一个组件，返回一个高阶组件（其实就是给传入的组件增加一些属性和功能）connect根据传入的map，将state和dispatch(action)挂载子组件的props上，我们直接放出...App，为什么react-redux要这样设计，react-redux作为一个被广泛使用的模块，其设计肯定有它的深意。...我们可以进行一些改造，借鉴react-redux的实现思路，我们可以把applyMiddleware作为高阶函数，用于增强store，而不是替换dispatch：先对createStore进行一个小改造...，使传入的中间件函数变成 (...arg) => mid3(mid1(mid2(...arg)))这种形式不直接替换dispatch，而是作为高阶函数增强createStore，最后return的是一个新的

2.6K2 0

react知识总结_六年级教学工作总结个人

applyMiddleware 是 store 的第三个参数，它是一个函数，用来拓展 store ，这个方法来源于 redux 。...让 dispatch 接受一个函数，让他能够进行异步操作： addUserData: (user) => { return dispatch((dispatch, getState)=> {...setTimeout(()=> { dispatch(addUser(user)) }, 2000) }) } 传递一个函数之后，这个函数可以接受两个参数，一个是 dispatch...，另一个是 getState ,然后在里面进行异步操作，我这里设置了 2秒然后添加了一个用户，点击之后，过了 2秒我的用户才会被添加进去，而页面也是等到 2秒后重新渲染。...这种异步思路就是使用 Action Creator 返回一个函数，然后使用 redux-thunk 让 dispatch 能够接受一个函数作为参数。

8932 0

理解 React 中的 Redux-Thunk

Thunk 是一个逻辑编程概念。你可以用来处理推迟任何事件的计算或者评估的函数，并且 React-Thunk 可以有效地充当应用程序的单独线程。...Redux Thunk 是一个中间件，它允许 Redux 返回函数而不是 actions。这就允许你在延迟处理 actions 的时候结合 promises 使用。...return { ...state, zip: MOR0O0 } 为了让事情简单，Redux-thunk 是一个中间件，使用户能够使用异步函数代替 API 调用。...action 对象应该被返回，因为 action 是一个对象。Redux-thunk 允许一个 action creator 返回一个函数！现在，我们可以做任何异步工作。...当一个 action 是一个函数，它会被调用，否则它会被传递给下一个中间件或者 Redux 本身。

1.3K2 0

React 没有中间件还能用吗？

---- redux middleware 是 redux 的一个 advanced feature. 这个概念并不是很新奇,以为在 Koa 里面早已经实现过了....不过实话说, 真心没有 koa 里面的 compose 函数写得好, 你直接先写一个 noop 函数不行吗！！！ // 俺实际写了一个替换的compose....该库灰常简单, 就一个函数. redux-thunk 直接看源码算了: function createThunkMiddleware(extraArgument) { return ({ dispatch...(); thunk.withExtraArgument = createThunkMiddleware; export default thunk; 他和原来的中间件的写法有一个非常不同的地方,在于....) ); // thunk 类型的中间件 function doSth(forPerson) { // 这里必须返回一个函数...

1.7K2 0

react基础--2

react-redux react-redux需要配合 redux使用，react-redux可实现 redux与react的连接但需遵循如下规范： 1.所有UI组件都应该包裹一个容器组件，他们是父子关系...需要给connect函数传递两个参数第一个参数是给ui组件的状态，第二个参数是给ui组件的操作状态的方法但这两个参数必须是函数，通过函数的返回值给到ui组件如下 // 引入 ui 组件 import.../components/Count' // 引入connect用于连接ui组件与redux import { connect } from 'react-redux' // 该函数返回的对象中的key...)) 注意 redux中的reducer函数必须是一个纯函数也就是必须遵循 1.不得改写参数数据 2.不会产生任何副作用如网络请求 3.不能调用 Data.now()或者Math.random()等不纯方法...所以reducer不能使用一些数组方法如 unshift,push直接对原参数进行修改不是纯函数会影响redux对状态的改变这样会造成数据不响应，不会更新到视图

1.6K2 0

深入Redux架构

// 设置监听函数 store.subscribe(listener); listener可以通过store.getState()得到当前状态。...（2）返回的函数的参数是dispatch和getState这两个 Redux 方法，普通的 Action Creator 的参数是 Action 的内容。...) ); 上面代码使用redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数。...因此，异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch。...React-Redux的用法为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux，本文主要介绍它。这个库是可以选用的。

2.8K6 0

听说redux很简单

不仅于此，它还提供超爽的开发体验，比如有一个与时间旅行调试器相结合的实时代码编辑。...JS 库(不是 react 插件库) 它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用作用: 集中式管理 react 应用中多个组件共享的状态 redux...工作流程什么情况下需要使用 redux 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一个组件的状态...from 'redux-thunk' // redux 异步中间件 const store = createStore( counter, applyMiddleware(thunk) /..., 当产生了新的 state 时, 自动调用 react-redux 理解一个 react 插件库专门用来简化 react 应用中使用 redux React-Redux 将所有组件分成两大类 UI

5325 0

React进阶篇（八）react redux

状态只读：不允许直接修改状态（必须通过 dispatch action来修改状态）纯函数reducer：状态修改为一个纯函数（接受一定的输入，必定会得到一定的输出）完成。 1....: store.getState, // 利用匿名函数包裹dispatch。...，它将 chain 中的所有匿名函数`[f1, f2, ... , fx, ..., fn]`组装成一个新的函数， // 即新的dispatch。...比如redux-thunk： const thunk = store =>next => action => typeof action === 'function' ?...Redux性能优化使用react-redux 在使用react-redux的connect函数时，实际上产生了一个无名的React组件类，这个类定制了shouldComponentUpdate函数的实现

1.7K3 0

06-React状态管理 Redux(工作流程, 核心概念, 求和案例, 异步Action, React-Redux, 多状态管理, 纯函数, 高阶函数, Redux开发者工具)

Redux 简介其实就是一个集中的状态管理技术, 类似于VueX, 以及后端的分布式配置中心, 在前端的文章里提后端,是不是不太好~, 但是能学习这个技术的人, 从简短的一句话中应该就已经简单的了解了这个技术.../reducers' const store = createStore(reducer) 此对象的功能函数参数作用 getState() 无获取state dispatch(action) action..., 优化为一个对象, 直接返回一个action, 然后react-redux会自动调用dispatch进行action分发优化Index组件 import React from 'react'; import...,random等不纯的方法 redux的reducer函数必须是一个纯函数高阶函数理解: 一类特别的函数情况1: 参数是函数情况2: 返回是函数常见的高阶函数: 定时器设置函数数组的forEach...E:\js\react_redux> 打包完成后会生成一个build文件夹, 我记得Vue应该是dist npm -i serve -g 全局安装serve 当然, 真的上线也不是这么玩的, 一般前端上线都是挂在

2.4K2 0

使用Redux制作一个TodoList

from 'redux-thunk'; import { composeWithDevTools } from 'redux-devtools-extension' import logger from...console.log("dispatch->", action); // let result = next(action); // console.log("next store->", store.getState..., logger))) // 监听数据变化 store.subscribe(() => { console.log("state", store.getState()); }) export default...connect 函数为 react-redux 为 react 提供的更加方便管理状态的插件，使 redux 和 react 能够更加方便的整合和使用，改函数需要配合 Provider 组件使用，该函数有...返回一个对象，key为UI界面对应的名称，value为state处理的结果 mapDispatchToProps：更新 action————>作为输出源。

6981 0

《彻底掌握redux》之开发一个任务管理平台

你将收获 redux的工作机制和基本概念 redux的使用模式 redux相关生态的使用(react-redux, keymirror, reduce-reducers) 异步action解决方案redux-thunk...首先是用户触发action（在代码层面只有dispatch才能触发action），这时store会自动调用reducer函数并传入上一个状态的state和action，reducer函数会返回一个新的state.../> , document.getElementById('root') ) 3.2 keymirror keymirror这个库不是必选项，它主要是用来生成 key =...异步action本质上是返回一个函数，在函数里面执行相关操作，但是普通的action返回的是一个对象，那么如何去处理呢？...想一想我们上面介绍的redux中间件机制，我们可以重写dispatch呀，的确，redux-thunk的源码就是对dispatch进行了加工，返回了一个高阶函数，具体源码就不带大家细读了，redux-thunk

1.3K3 0

React全家桶之Redux使用

使用redux 让我们闭上眼睛想想，如果用一个词描述React 和Redux 给我们留下了什么印象，我想到的不是难学，不是繁琐，而是“限制”。...全局应用中只能有一个。创建一个 store.js store同时必须对应一个 reducer函数：他接收两个参数，分别是当前的 state 树和要处理的 action，返回新的 state 树。...这需要react-redux提供的另外一个函数：connect connect(state=>({ fruits:state.list, }))(原来的函数组件) 原来的函数组件，映射出来，自动带上了各种状态...首先用一个语义化的函数名指代第一个参数： //给包装的组件传属性 const mapStateToProps=state=>({ fruits:state.list, }) 第二个参数本质上是一个..., thunk)); 定义异步动作 // store // 在把异步请求的动作放到一个异步操作中。

1.7K2 0

React高级篇（二）Redux工作流(react-redux)

在《React高级篇（一）从Flux到Redux，react-redux》文章中贴过一张redux单向数据流的图，但是，从action到reduer，其实还缺少了不少环节。...创建Store的enhancer 一个store对象中包含下列接口： dispatch subscribe getState replaceReducer 一般来说，自定义enhancer都是针对上述接口做能力增强...，给这个函数一个新的实现，但是在完成增强功能之后，还是要调用原有的函数，保持原有的功能。...常用的异步流中间件处理库为redux-thunk。...const thunk = store =>next => action => typeof action === 'function' ?

1.5K2 0

redux&react-redux

redux是什么 1、redux是一个专门用于做状态管理的js库（不是react插件库）。 2、它可以用在react，angular，vue等项目中，但基本与react配合使用。...redux目录 redux store.js：该文件专门用于暴露一个store对象，整个应用只有一个store对象 reducers文件夹：本质是一个函数,接收：preState(第一次时undefined...监测redux中状态的改变,如redux的状态发生了改变，就执行一次语法：store.subscribe( ()=>{} ) dispatch：传递action{type:’’,data:’’} getState...combineReducers ：当有多个状态时需要使用，可以将状态合并为一个对象 react-redux react-redux目录 containers 用来放置容器组件和UI组件（直接将UI组件和容器组件写入一个...,而不是在容器组件中直接介入 //[备注]:mapDispatchToProps,也可以直接是一个对象，会自动注入dispatch（所以对象的方式不用写dispatch） // 简写 connect(

8751 0

miniRedux实现与源码解读

image redux中有一个reducer函数和action 通过dispatch(action)来触发reducer的对应的case 提供一个createStore方法传入reducer 返回的对象中包含..., subscribe, dispatch} } createStore 内部是一个观察者模式， subscribe 添加注册函数 dispatch让函数自调用首次调用createStore的时候...内部会执行一次dispatch 将reducer绑定进来 enhancer 是一个组合 store creator 的高阶函数，返回一个新的强化过的 store creator。...高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件 // 高阶组件思想 function hello() { console.log('我喜欢react'); }...举例 thunk中最开始接受的参数 {dispatch getState} 是从midApi中传来的 next 指代store.dispatch action就是action const thunk

8852 0

点击加载更多

前端模块化开发--React框架（四）：高级应用（redux）

Redux 入门到高级教程

react-05

Redux快速上手

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

Reduxreact-reduxredux中间件设计实现剖析

react知识总结_六年级教学工作总结个人

理解 React 中的 Redux-Thunk

React 没有中间件还能用吗？

react基础--2

深入Redux架构

听说redux很简单

React进阶篇（八）react redux

06-React状态管理 Redux(工作流程, 核心概念, 求和案例, 异步Action, React-Redux, 多状态管理, 纯函数, 高阶函数, Redux开发者工具)

使用Redux制作一个TodoList

《彻底掌握redux》之开发一个任务管理平台

React全家桶之Redux使用

React高级篇（二）Redux工作流(react-redux)

redux&react-redux

miniRedux实现与源码解读

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐