redux-thunk使用教程
https://github.com/chunhuigao/react-redux-thunk
创建react工程
create-react-app study-redux
复制代码
启动react服务
安装redux
npm install redux
npm install react-redux
npm install redux-thunk
复制代码
我的工程目录
删除无用的代码
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';class App extends Component {render() {return (<div className="App">{/* <header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header> */}</div>);}
}export default App;复制代码
创建第一个组件
import React, { Component } from 'react'class Hello extends Component {render() {return (<div><h2>学习redux</h2></div>)}
}
export default Hello
复制代码
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './component/hello/hello.js'
class App extends Component {render() {return (<div className="App"><Hello /></div>);}
}export default App;
复制代码
添加第一个事件
import React, { Component } from 'react'
import './hello.css'class Hello extends Component {constructor(props){super(props)this.state = {title:'学习redux'}}changeTitle(){let title = '学习redux' + Math.ceil(Math.random()*100)this.setState({title:title})}render() {return (<div><h2>{this.state.title}</h2><button className="btn" onClick={()=>{this.changeTitle()}}>点击我改变标题</button></div>)}
}
export default Hello
复制代码
开始使用redux
index.js引用一下内容
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';import { Provider } from 'react-redux' //新引入
import {createStore} from 'redux' //新引入
import rootReducer from './rootReducer.js' //新引入const store = createStore(rootReducer)
ReactDOM.render(
<Provider store={store}><App />
</Provider>
, document.getElementById('root'));// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();复制代码
创建rootReducer
import {combineReducers} from 'redux'
import helloReducer from './component/hello/helloReducer.js'
const rootReducer = combineReducers({helloReducer
})
export default rootReducer
复制代码
创建helloReducer.js
const initState = {name:'hello,redux'
}
export default (state=initState,action) => {switch (action.type) {case 'CHANGE_NAME':return {...state,name:action.text}default:return state;}
}
复制代码
数据绑定到组件
import React, { Component } from 'react'//引用connect
import {connect} from 'react-redux'import './hello.css'class Hello extends Component {constructor(props){super(props)this.state = {title:'学习redux'}}changeTitle(){let title = '学习redux' + Math.ceil(Math.random()*100)this.setState({title:title})}render() {
//此处打印this.props应该可以看到helloProp这个对象了,证明数据已经挂在到组件紫红console.log(this.props)let {prop} = this.propsreturn (<div><h2>{this.state.title}</h2><h3>我是来自redux数据{prop.name}</h3><button className="btn" onClick={()=>{this.changeTitle()}}>点击我改变标题</button></div>)}
}//mapStateToProps是connect一个参数, 作用到将store中的数据作为 props 绑定到组件上
const mapStateToProps = (state, ownProps) => {return {helloProp: state.helloReducer//helloReducer是在rootReducer中的名}
}
//通过connect高阶函数绑定数据
export default connect(mapStateToProps)(Hello)
复制代码
创建helloAction.js
const helloAction = {changeName:(text)=>({type:"CHANGE_NAME",text:text,mate:'用于改变helloReducer中name值'})
}
export default helloAction
复制代码
将action绑定到组件
import React, { Component } from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
//引入helloAction
import helloAction from './helloAction.js'
import './hello.css'class Hello extends Component {constructor(props){super(props)this.state = {title:'学习redux'}}changeTitle(){let title = '学习redux' + Math.ceil(Math.random()*100)this.setState({title:title})}render() {//此处打印,应该可以看到actionsconsole.log(this.props)let {prop} = this.propsreturn (<div><h2>{this.state.title}</h2><h3>我是来自redux数据{prop.name}</h3><button className="btn" onClick={()=>{this.changeTitle()}}>点击我改变标题</button></div>)}
}const mapStateToProps = (state, ownProps) => {return {prop: state.helloReducer}
}//使用mapDispatchToProps绑定helloAction
const mapDispatchToProps = (dispatch, ownProps) => {return {actions:bindActionCreators(helloAction,dispatch)}
}
//将mapDispatchToProps作为参数给connect
export default connect(mapStateToProps,mapDispatchToProps)(Hello)
复制代码
changeTitle(){let title = '学习redux' + Math.ceil(Math.random()*100)// this.setState({// title:title// })let {actions} = this.propsactions.changeName(title)}
复制代码
创建other组件
import React, { Component } from 'react';
import Hello from './component/hello/hello.js'
import Other from './component/other/other.js'
import './App.css';class App extends Component {render() {return (<div className="App"><Hello /><Other /></div>);}
}export default App;复制代码
other具体代码
import React, { Component } from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import helloAction from '../hello/helloAction.js'class Other extends Component {changeName(){let {helloAction} = this.props;let text = 'other' + (Math.random() *100)helloAction.changeName(text)}render() {let {otherProp} = this.propsconsole.log(this.props)return (<div><h3>我是其他组件</h3><button className="btn" onClick={()=>{this.changeName()}}>我是其他组件的按钮</button></div>)}
}const mapStateToProps = (state, ownProps) => {return {otherProp: state.helloReducer}
}
const mapDispatchToProps = (dispatch, ownProps) => {return {helloAction:bindActionCreators(helloAction,dispatch)}
}
export default connect(mapStateToProps,mapDispatchToProps)(Other)
复制代码
组件上绑定多个数据
const initState = {title:'我是otherReducer数据'
}export default (state=initState,action) => {switch (action.type) {case "CHANGE_TITLE":return {...state,title:action.text}default:return state}
}
复制代码
import {combineReducers} from 'redux'
import helloReducer from './component/hello/helloReducer.js'
import otherReducer from './component/other/otherReducer.js'
const rootReducer = combineReducers({helloReducer,otherReducer
})
export default rootReducer
复制代码
const mapStateToProps = (state, ownProps) => {return {helloProp: state.helloReducer,otherProp: state.otherReducer}
}
复制代码
render() {let {helloProp,otherProp} = this.propsconsole.log(this.props)return (<div><h3>我是其他组件</h3><button className="btn" onClick={()=>{this.changeName()}}>我是其他组件的按钮</button><div>{otherProp.title}</div></div>)}
复制代码
redux异步操作
//注释import {createStore} from 'redux'
//新增
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'//注释 const store = createStore(rootReducer)
//新增
const store = createStore(rootReducer,applyMiddleware(thunk))
复制代码
import React, { Component } from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import exampleAction from './exampleAction.js'
class Example extends Component {asyncFn(){let {exampleAction} = this.propsexampleAction.asyncThing()console.log(this.props)}render() {let {exampleProp} = this.propsreturn (<div><h3>异步操作</h3><h4>{exampleProp.text}</h4><button className='btn' onClick={()=>{this.asyncFn()}}>我要进行异步操作</button></div>)}
}
const mapStateToProps = (state, ownProps) => {return {exampleProp: state.exampleReducer}
}
const mapDispatchToProps = (dispatch, ownProps) => {return {exampleAction:bindActionCreators(exampleAction,dispatch)}
}
export default connect(mapStateToProps,mapDispatchToProps)(Example)
复制代码
const initState={text:'我是用来测试异步操作的',sign:null
}
export default (state=initState,action) =>{console.log(action)switch (action.type) {case 'SUCCESS':return {...state,text:action.text,sign:'success'}case 'ERROR':return {...state,text:action.text,sign:'error'}default:return state}
}
复制代码
const exampleAction = {asyncThing:()=>{return (dispatch, getState) =>{// fetch('https://hacker-news.firebaseio.com/v0/jobstories.json')// .then(res => {// dispatch(exampleAction.asyncSuccess('我是成功回调')) // }).catch(e => {// dispatch(exampleAction.asyncError('我是成功回调')) // });setTimeout(() => {let sign = Math.random() >= 0.5 ? true : false;console.log(sign)sign ? dispatch(exampleAction.asyncSuccess('我是成功数据')) : dispatch(exampleAction.asyncError('我是失败数据')) }, 2000);}},asyncSuccess:(text)=>({type:'SUCCESS',text:text,mate:'异步成功操作'}),asyncError:(text)=>({type:'ERROR',text:text,mate:'异步成功操作'})
}
export default exampleAction
复制代码
import {combineReducers} from 'redux'
import helloReducer from './component/hello/helloReducer.js'
import otherReducer from './component/other/otherReducer.js'
import exampleReducer from './component/example/exampleReducer.js'
const rootReducer = combineReducers({helloReducer,otherReducer,exampleReducer
})
export default rootReducer
复制代码
结束语:
转载于:https://juejin.im/post/5c446a7a51882524b4074354
redux-thunk使用教程相关推荐
- redux的使用教程
题目:redux的使用教程 前言:学习react的过程中一定会碰到redux,我在学习redux的时候,每每感觉自己记住了,但是用的时候,感觉总是不知如何写起,或者会用的时候总会出错,所以打算写一篇r ...
- Redux 异步数据流-- thunk中间件源码解析
Thunk 引入背景 这是一个关于Redux异步数据流的故事.引入thunk中间件的完整故事在Redux官方中文文档异步数据流.一句话总结就是:原生Redux只支持同步数据流,所以需要引入中间件(mi ...
- Redux 主要知识学习总结
文章出自个人博客 https://knightyun.github.io/2020/11/29/js-redux-summary,转载请申明 概念 Redux 作为一个状态管理器,可以应用于多种 we ...
- React+Redux技术栈核心要点解析(中篇)
感谢作者郭永峰的授权发布. 作者:郭永峰,前端架构师,现用友网络 FED团队负责人,目前主要负责企业级应用前端技术平台建设工作,在前端工程化实现.Node 应用开发.React技术.移动开发等方向有丰 ...
- React + Redux
相当长一段时间以来,我一直在React和Redux中实现应用程序.在过去的几年里,我写了两本关于它的电子书,并发布了学习React及其生态系统的课程平台.课程平台甚至内置在React和Redux中.我 ...
- redux 存值 及 取值 的操作
项目目录 首先,一个基于React + Redux + React-Router的项目目录可以按照我下方的图片来构建: 其中assets目录用于存放项目的静态资源,如css/图片等,src目录则用于存 ...
- redux-thunk使用_Redux Thunk用示例解释
redux-thunk使用 Redux Thunk is middleware that allows you to return functions, rather than just action ...
- 使用Redux在React Navigation App中管理状态
by Andrea Bizzotto 通过安德里亚·比佐托(Andrea Bizzotto) 使用Redux在React Navigation App中管理状态 (Managing State in ...
- Mobx | 强大的状态管理工具 | 可以用Mobx来替代掉redux
来源简书 电梯直达 https://www.jianshu.com/p/505d9d9fe36a Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情 ...
- 入门 redux 和 @connect 装饰器
点击上方 前端瓶子君,关注公众号 回复算法,加入前端编程面试算法每日一题群 来源:北孤清茶 https://juejin.cn/post/6953866924065292318 首先第一步利用脚手架创 ...
最新文章
- 干粮 -- 计算机程序设计艺术(The Art of Computer Design) - 2
- bzoj3223 splay
- 面向对象三大特性,六个原则
- redux ngrx_另一个减少Redux(NGRX)应用程序样板的指南
- mysql conflict语句_详细解读MySQL事务
- linux操作系统基础篇(四)
- 山东科技大学计算机网络_山东科技大学计算机网络共20讲视频
- 计算机主板手工,高手在民间 DIY牛人打造实木机箱全纪录
- python 水晶报表_水晶报表连接Oracle做数据报表笔记
- 河南计算机会考必背知识点,2017年河南物理高中会考知识点大全
- 阿里系产品Xposed Hook检测机制原理分析
- 计算机分级时无法度量视频播放,无法度量视频播放性能怎么办-无法度量视频播放性能的解决方法 - 河东软件园...
- AGI (Analytical Graphics Inc.)
- 在Excel数据最后一行下面写入数据的一种方法
- Linux 安装 MySQL 8.0 并配置远程登录
- 75 [backtrader期货策略]十大经典策略-分时均线交叉策略
- BSP-充电名词解释
- foxmail皮肤_七大改变!Foxmail 6.5新功能体验
- 喜讯 | 南京南方电讯有限公司荣膺“2021中国年度优选雇主”称号
- Seata分布式事务控制整合Mybatis-Plus导致事务控制失效
热门文章
- SIFT特征提取算法总结
- 【linux】Valgrind工具集详解(二):入门
- 数据处理过程放在oracle,Oracle存储过程语法及常用函数总结
- 源码mysql安装问题_MySQL5.7源码安装问题汇总
- 均方根误差不超过_描述数值预报随机误差的利器:随机物理扰动组合方案
- python病毒扫描器_基于Python的病毒扫描机制
- 驾校计算机岗位管理制度,驾校计算机的规章制度.doc
- ansys添加力矩_ansys中的workbench怎么添加力矩
- 异步方法顺序调用问题
- JS对象转URL参数