文档章节

看了就学会之React redux入门示例

前端攻城小牛
 前端攻城小牛
发布于 12/04 22:09
字数 781
阅读 194
收藏 2

本篇文章主要介绍了react redux入门示例,现在分享给大家,也给大家做个参考。如有不足之处,欢迎批评指正。

环境准备 为了方便,这里使用create-react-app搭建react环境

create-react-app mydemo

弹出配置

如果需要自定义react的配置,需要运行下面的命令把配置文件弹出来。

npm run eject

安装redux

npm i redux --save

简单理解

redux简单用法就是通过它的store来订阅和发布信息。

通过subscribe来订阅action,通过dispatch来触发action。reducer中定义来各个action要做的事情。

demo代码

reducer定义

const Add = 'addGirl'``, Remove = "removeGirl"``;
export function reducer(state = 0, action) {
switch (action.type) {
case Add:
return state + 1;
case Remove:
return state - 1;
default``:
return 10;
}//欢迎加入前端全栈开发交流圈一起学习交流:864305860
}
//action creator,把action封装成一个方法,这样用的时候不用每次定义,避免出错
export function addCreator() {
return { type: Add };
}
export function removeCreator() {
return { type: Remove };
}
export function addAsync() {
return (dispatch, getState) => {
setTimeout(``function () {
dispatch(addCreator());
}, 1000);//欢迎加入前端全栈开发交流圈一起学习交流:864305860
}//面向1-3年前端人员
}//帮助突破技术瓶颈,提升思维能力

入口文件index.js

import React from 'react'``;
import ReactDOM from 'react-dom'``;
import './index.css'``;
import App from './App'``;
import registerServiceWorker from './registerServiceWorker'``;
import { createStore } from 'redux'``;
import thunk from 'redux-thunk'``;
import { reducer,addCreator,removeCreaator } from './index.redux'``;
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
ReactDOM.render(
<App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
document.getElementById(``'root'``)
);
}
//封装成方法,方便下面的store的订阅调用
render();
//每当dispatch时,订阅的函数就会执行
store.subscribe(render);
registerServiceWorker();

App.js

import React, { Component } from 'react'``;
import './App.css'``;
class App extends Component {
render() {
var store=``this``.props.store;
var num=store.getState();
return (
<div className=``"App"``>
<h1>现在有机关枪{``this``.props.num}把。</h1>
<button onClick={() => { store.dispatch(``this``.props.addCreator()) }}>add</button>
<button onClick={() => { store.dispatch(``this``.props.removeCreator()) }}>remove</button>
</div >//欢迎加入前端全栈开发交流圈一起学习交流:864305860
);
}
}
export default App;

通过store的dispatch来触发action,index.js中订阅的事件就会执行。

redux的异步执行

redux中如果需要执行异步操作,需要安装react-thunk插件

npm i react-thunk --save

同时需要redux插件的applyMiddleware

关键代码

设置其实很简单,创建store时,把thunk传递给它就行了。

import thunk from 'redux-thunk'``;
const store = createStore(reducer, applyMiddleware(thunk));

在app.js中增加一个触发异步操作的按钮,reducer中已经定义了一个异步的方法。

export function addAsync() {
return (dispatch, getState) => {
setTimeout(``function () {
dispatch(addCreator());
}, 1000);//欢迎加入前端全栈开发交流圈一起学习交流:864305860
}
}

异步调用方法会返回一个有两个参数的方法,两个参数都是函数,第一个是dispatch函数,第二个是getState函数。 dispatch触发action,getState获取state的值。

在app.js中增加代码

<button onClick={() => { store.dispatch(``this``.props.addAsync()) }}>addAsync</button>

结语

感谢您的观看,如有不足之处,欢迎批评指正。

© 著作权归作者所有

共有 人打赏支持
前端攻城小牛
粉丝 1
博文 12
码字总数 17344
作品 0
浦东
私信 提问
加载中

评论(1)

陈海雷
我国每年都有2000万人得胃炎,胃癌,很大部分原因是没有及时吃早餐。
【阿里巴巴早餐计划】每年发放20亿早餐补贴来鼓励您及时吃早餐。支fu宝领取补贴,首页搜索:600767917早餐消费,答应我好好照顾自己。/爱心
看了就学会之React redux入门示例

本篇文章主要介绍了react redux入门示例,现在分享给大家,也给大家做个参考。如有不足之处,欢迎批评指正。 环境准备 为了方便,这里使用create-react-app搭建react环境 弹出配置 如果需要自...

前端攻城老湿
12/04
0
0
日了狗!Redux最简单的入门介绍

日了狗了,狗日的react+redux的水太深了。 哥哥我已经连续研究了很近了,看了那些狗日的写的redux简单示例。妈蛋的,没一个写的好的。看了半天云里雾里,狗日的不知道提供一个最简单的打包下...

supperman
2016/09/14
19
0
通过一个计数器来了解react-redux及其用法

react之前在看看的时候工作过,后面到了TX就一直使用vue,react被忘得一干二净,这几天下了一个决心,想把react文档从头到尾重新看一遍,结果发现东西实在是太多了。react,redux,react-red...

刘源泉
08/03
0
0
react学习资源汇总

react-tutorial a tutorial react collection and sort,let you easily get started and organized 主要是搜集整理生态从入门到深入的教程、工具和自己做的demo,以便日后查阅 :blush: 设计思...

逆蝶_Snow
2016/12/01
298
0
小册上新:Taro 多端开发实现原理与项目实战

学习一门技术的最好方法,就是在实践中使用它。 Taro 也是如此。Taro 是由京东凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。他们为此专门撰写了一本小册子,主要介绍从 0 到...

小册姐
11/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

slot分发内容

slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。 有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。 内容分发就是指混合父组件的内...

Carbenson
14分钟前
1
0
python开发入门

1.执行python文件 # python ./demo.py 2.Python ImportError: No module named 'requests'异常 解决方法: # pip install requests;...

硅谷课堂
15分钟前
1
0
官宣,PyTorch 1.0 稳定版本现已推出

简评:快来一起快乐地学习吧。 随着 PyTorch 生态系统和社区继续为开发人员提供有趣的新项目和教育资源,今天(12 月 7日)在 NeurIPS 会议上发布了 PyTorch 1.0 稳定版。研究人员和工程师现...

极光推送
28分钟前
1
0
对比理解adr,ldr指令

很多人在写简单的裸机代码或分析uboot时,常常遇到adr ldr指令。却分不清这2者的区别,今天就来谈谈adr与ldr指令。 参照韦老师的代码和Makefile写了test_adr.S: .text .globl _start _start...

天王盖地虎626
39分钟前
3
0
将spring boot 项目注册为Linux的服务

springboot 注册为Linux系统服务 springboot 注册为Linux系统服务

miaojiangmin
41分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部