详解react-redux插件入门


Posted in Javascript onApril 19, 2018

可先查看我的redux简单入门

react-redux简介

react-redux是使用redux开发react时使用的一个插件,另外插一句,redux不是react的产品,vue和angular中也可以使用redux;下面简单讲解,如何使用react-redux来开发react。

描述

这个插件可以让我们的redux代码更加的简洁和美观。我假设你已经有一个使用create-react-app创建的一个可以显示hello world的react环境,并且已经安装来redux。

注意:如果是刚使用create-react-app创建的,需要运行 npm run eject弹出个性化设置,这样就可以自定义配置了。

安装

npm i react-redux --save

使用

react-redux提供了两个重要的接口:Provider、connect,使用了这个插件,react-redux的subscribe和dispatch就可以忘记来,它们就用不着了。

代码结构

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { reducer } from './index.redux';
import { Provider } from 'react-redux'

const store = createStore(reducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

registerServiceWorker();

Provider中应用的最外层,把store传给它,只使用这一次。

//app.js

import React, { Component } from 'react';
import { addCreator, removeCreator, addAsync } from './index.redux';
import { connect } from 'react-redux';
class App extends Component {
 render() {
  return (
   <div className="App">
    <h1>现在有美女{this.props.num}个。</h1>
    <button onClick={this.props.addCreator}>add</button>
    <button onClick={this.props.removeCreator}>remove</button>
    <button onClick={this.props.addAsync}>addAsync</button>
   </div >
  );
 }
}

//定义把state中哪个属性放到props中
 function mapStateToProps(state) {
  return { num: state }
 }
 //定义把哪些方法放到props中
 const actionCreators={ addCreator, removeCreator, addAsync };
 //connect其实就是一个高阶组件,把app传进去,返回一个新的app组件
 App = connect(mapStateToProps, actionCreators)(App);
export default App;

connect负责从外部获取组件需要的参数。通过connect定义后,放到props中的属性和方法就可以直接通过this.props来获取。

下面是reducer的定义。

//react.redux.js

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

export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}

export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

使用装饰器的方式更优雅的写Conect

首先需要安装babel-plugin-transform-decorators-legacy,并在package.json中配置。

安装

npm i babel-plugin-transform-decorators-legacy --save-dev 这个只是开发使用,所以安装到--save-dev

配置

配置babel的plugins属性

"babel": {
  "presets": [
   "react-app"
  ],
  "plugins": [
   ["transform-decorators-legacy"]
  ]
 }

修改原来写法
使用@connect来重新定义,写到class的上头即可。

//App.js

@connect((state) => ({ num: state }),{ addCreator, removeCreator, addAsync })
class App extends Component {
.....//省略


// function mapStateToProps(state) {
//  return { num: state }
// }
// App = connect(mapStateToProps, { addCreator, removeCreator, addAsync })(App);

VS Code 装饰器提示“experimentalDecorators”的解决办法

点击Visual Studio Code左下角的配置按钮(或者文件>首选项>配置,Windows环境),打开用户设置窗口,在搜索框内输入“experimentalDecorators”,发现竟然能够找到选项,如下:

"javascript.implicitProjectConfig.experimentalDecorators": false

改成true就可以了。

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

Javascript 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
vuex state及mapState的基础用法详解
Apr 19 #Javascript
使用vuex的state状态对象的5种方式
Apr 19 #Javascript
react redux入门示例
Apr 19 #Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 #Javascript
使用typescript开发angular模块并发布npm包
Apr 19 #Javascript
Angular 封装并发布组件的方法示例
Apr 19 #Javascript
angular第三方包开发整理(小结)
Apr 19 #Javascript
You might like
php解决约瑟夫环示例
2014/04/09 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
手机端转换rem适应
2017/04/01 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
详解Python验证码识别
2016/01/25 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
JAVA程序员面试题
2012/10/03 面试题
《少年王勃》教学反思
2014/04/27 职场文书
员工保密承诺书
2014/05/28 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
干部作风建设心得体会
2014/10/22 职场文书
顶岗实习协议书
2015/01/29 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android