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 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
javascript的this关键字详解
May 20 Javascript
详解Vue中的Props与Data细微差别
Mar 02 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性能测试工具xhprof的详解
2013/06/03 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
员工培训心得体会
2013/12/30 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
消防安全宣传标语
2014/06/07 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书