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 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
javascript canvas实现雨滴效果
Jun 09 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
传智播客学习之java 反射
2009/11/22 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
详解Vite的新体验
2021/02/22 Javascript
python实现kMeans算法
2017/12/21 Python
Python程序运行原理图文解析
2018/02/10 Python
Python打印输出数组中全部元素
2018/03/13 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
python 制作本地应用搜索工具
2021/02/27 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
邀请函怎么写
2015/01/30 职场文书
中学推普周活动总结
2015/05/07 职场文书
2019年思想汇报
2019/06/20 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python