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 autocomplete 使用手册
Apr 01 Javascript
JavaScript 的继承
Oct 01 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
详解php协程知识点
2018/09/21 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
JS 继承实例分析
2008/11/04 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
移动通信专业自荐信范文
2013/11/12 职场文书
工程总经理工作职责
2013/12/09 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
共产党员公开承诺书
2014/03/25 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
演讲开场白台词大全
2015/05/29 职场文书