redux-thunk使用
2020-01-15 07:30
169 查看
引入中间件解决纯函数不能使用异步,其它函数的代码
*store.js* import {applyMiddleware,createStore,compose} from 'redux' import reducers from './reducers.js' import thunk from 'redux-thunk' const composeEnhancers=window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose const enhancer=composeEnhancers(applyMiddleware(thunk)) const store =createStore(reducers,enhancer) export default store *actions.js* import store//引入store export const getListAction=(data)=>({type:GET_TODO_LIST,data:data}) export const getList=()=>{ return ()=>{ // thunk中间件,getListAction在getList间接使用并分发reducers,axios为非纯函数代码 axios.get('https://douban.uieee.com/v2/book/search?q=虚构类&count=8').then(res=>{ const data=res.data.books const action=getListAction(data) store.dispatch(action) }).catch(err=>{ console.log(err) }) } } *reducers.js* switch (action.type) { case GET_TODO_LIST: newState.data=action.data return newState default: break; } *app组件* import getList from './actions' //getToDoList为在组件中componentWillMount自定义的函数 getToDoList=()=>{ getList()() }
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- redux在react-native上使用(三)--加入redux-thunk
- React ( redux 的使用流程及简单的案例 ,redux的数据划分使用,以及react-redux,react-thunk的使用)
- redux中间件之redux-thunk的具体使用
- react简书项目学习笔记31模拟数据渲染,在项目中使用redux-thunk请求ajax数据
- Redux之使用redux-thunk进行ajax请求发送
- 使用redux-thunk实现异步操作的中止
- 使用redux-thunk时,更新state组件没有重新渲染(render)
- Redux-saga使用教程详解
- React第三方组件5(状态管理之Redux的使用①简单使用)
- 为什么 react 中要使用 redux
- 使用Redux和ngrx构建更好的Angular2应用(三)
- React-Redux使用方法
- 使用 React Native 和 Redux 重构的知乎日报
- 使用redux-devtools工具
- Redux 生产实践使用注意事项
- redux-form(V7.4.2)笔记(三之补充)使用Flow初步
- 如何优雅地在React项目中使用Redux
- 轻松掌握Redux-Action使用方法
- redux在react-native上使用(一)--加入redux
- react-redux高阶组件connect方法使用介绍以及实现原理