react redux入门示例


Posted in Javascript onApril 19, 2018

环境准备

为了方便,这里使用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;
  }
}

//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);
  }
}

入口文件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 >
  );
 }
}
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);
  }
}

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

在app.js中增加代码

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的public、private和privileged模式
Dec 28 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
JQuery学习总结【二】
Dec 01 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
angular十大常见问题
Mar 07 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 #Javascript
使用typescript开发angular模块并发布npm包
Apr 19 #Javascript
Angular 封装并发布组件的方法示例
Apr 19 #Javascript
angular第三方包开发整理(小结)
Apr 19 #Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 #Javascript
You might like
php数据库连接
2006/10/09 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
javascript常用代码段搜集
2014/12/04 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
VUE中的无限循环代码解析
2017/09/22 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
JS实现多选框的操作
2020/06/24 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
鉴史问廉观后感
2015/06/10 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
浅谈Python数学建模之固定费用问题
2021/06/23 Python
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS