react-redux插件入门

Baaaan 发布于2019-08-22 16:28 / 3539人阅读

摘要：描述这个插件可以让我们的代码更加的简洁和美观。安装使用提供了两个重要的接口使用了这个插件，的和就可以忘记来，它们就用不着了。现在有美女个。

可先查看我的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(
    
        
    ,
    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 (
      
        现在有美女{this.props.num}个。
        
        
        
      
    );
  }
}

//定义把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就可以了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94393.html

React-Redux 入门教程

摘要：具体了解此方法可以请戳这里最后把对象暴露给在主入口进行调用我们通过提供的顶层组件传入然后把要展示的写入顶层组件就行了，提供了整个全局的供所有的子组件进行调用具体代码实现请项目目录 showImg(https://segmentfault.com/img/bVTGs8?w=214&h=571); 整个项目目录分为图中所示： Redux分为{Action,Reducer,Store} 入...

xuweijian 2019-08-20 18:56 评论0 收藏0
手挽手带你学React：四档（下篇）一步一步学会react-redux

摘要：手挽手带你学入门四档用人话教你，理解架构，以及运用在中。学完这一章，你就可以开始自己的项目了。结合搭建基础环境我们上一章讲过了的原理，内部是有一个的，只有才可以控制它变化。手挽手带你学React入门四档,用人话教你react-redux，理解redux架构，以及运用在react中。学完这一章，你就可以开始自己的react项目了。视频教程上一篇我们自己实现了Redux，这一篇我们来...

FullStackDeveloper 2019-08-23 15:11 评论0 收藏0
redux入门事例

摘要：中定义来各个要做的事情。代码定义把封装成一个方法，这样用的时候不用每次定义，避免出错入口文件封装成方法，方便下面的的订阅调用每当时，订阅的函数就会执行现在有机关枪把。通过的来触发，中订阅的事件就会执行。触发，获取的值。环境准备为了方便，这里使用create-react-app搭建react环境 create-react-app mydemo 弹出配置如果需要自定义react的配置...

cheng10 2019-08-22 16:28 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
redux —— 入门实例 TodoList

摘要：入门实例前端技术真是日新月异，搞完不搭配个数据流都不好意思了。关于的用法，这只是基础入门的部分，还有的多的搞基操作，比如异步数据流和配合。 redux —— 入门实例 TodoListshowImg(https://segmentfault.com/img/bVtSeH); Tip 前端技术真是日新月异，搞完 React 不搭配个数据流都不好意思了。满怀期待的心去翻了翻 flux，简直...

SKYZACK 2019-08-19 17:15 评论0 收藏0