成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react-redux插件入門

Baaaan / 3601人閱讀

摘要：描述這個插件可以讓我們的代碼更加的簡潔和美觀。安裝使用提供了兩個重要的接口使用了這個插件，的和就可以忘記來，它們就用不著了?，F(xiàn)在有美女個。

可先查看我的redux簡單入門

react-redux簡介

react-redux是使用redux開發(fā)react時使用的一個插件，另外插一句，redux不是react的產(chǎn)品，vue和angular中也可以使用redux；下面簡單講解，如何使用react-redux來開發(fā)react。

描述

這個插件可以讓我們的redux代碼更加的簡潔和美觀。我假設(shè)你已經(jīng)有一個使用create-react-app創(chuàng)建的一個可以顯示hello world的react環(huán)境，并且已經(jīng)安裝來redux。
注意：如果是剛使用create-react-app創(chuàng)建的，需要運行 npm run eject彈出個性化設(shè)置，這樣就可以自定義配置了。

安裝

npm i react-redux --save

使用

react-redux提供了兩個重要的接口：Provider、connect,使用了這個插件，react-redux的subscribe和dispatch就可以忘記來，它們就用不著了。

代碼結(jié)構(gòu)

//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中應(yīng)用的最外層，把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 (
      

        
現(xiàn)在有美女{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負責(zé)從外部獲取組件需要的參數(shù)。通過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);
    }
}
使用裝飾器的方式更優(yōu)雅的寫Conect

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

安裝

npm i babel-plugin-transform-decorators-legacy --save-dev 這個只是開發(fā)使用，所以安裝到--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環(huán)境)，打開用戶設(shè)置窗口，在搜索框內(nèi)輸入“experimentalDecorators”，發(fā)現(xiàn)竟然能夠找到選項，如下：

"javascript.implicitProjectConfig.experimentalDecorators": false

改成true就可以了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94393.html

相關(guān)文章

  • React-Redux 入門教程

    摘要：具體了解此方法可以請戳這里最后把對象暴露給在主入口進行調(diào)用我們通過提供的頂層組件傳入然后把要展示的寫入頂層組件就行了，提供了整個全局的供所有的子組件進行調(diào)用具體代碼實現(xiàn)請 項目目錄 showImg(https://segmentfault.com/img/bVTGs8?w=214&h=571); 整個項目目錄分為圖中所示： Redux分為{Action,Reducer,Store} 入...

    xuweijian 評論0 收藏0

  • 手挽手帶你學(xué)React：四檔（下篇）一步一步學(xué)會react-redux

    摘要：手挽手帶你學(xué)入門四檔用人話教你，理解架構(gòu)，以及運用在中。學(xué)完這一章，你就可以開始自己的項目了。結(jié)合搭建基礎(chǔ)環(huán)境我們上一章講過了的原理，內(nèi)部是有一個的，只有才可以控制它變化。 手挽手帶你學(xué)React入門四檔,用人話教你react-redux，理解redux架構(gòu)，以及運用在react中。學(xué)完這一章，你就可以開始自己的react項目了。 視頻教程 上一篇我們自己實現(xiàn)了Redux，這一篇我們來...

    FullStackDeveloper 評論0 收藏0

  • redux入門事例

    摘要：中定義來各個要做的事情。代碼定義把封裝成一個方法，這樣用的時候不用每次定義，避免出錯入口文件封裝成方法，方便下面的的訂閱調(diào)用每當時，訂閱的函數(shù)就會執(zhí)行現(xiàn)在有機關(guān)槍把。通過的來觸發(fā)，中訂閱的事件就會執(zhí)行。觸發(fā)，獲取的值。 環(huán)境準備 為了方便，這里使用create-react-app搭建react環(huán)境 create-react-app mydemo 彈出配置 如果需要自定義react的配置...

    cheng10 評論0 收藏0

  • 前端最實用書簽(持續(xù)更新)

    摘要：前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術(shù)做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術(shù)做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導(dǎo)入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

    sshe 評論0 收藏0

  • redux —— 入門實例 TodoList

    摘要：入門實例前端技術(shù)真是日新月異，搞完不搭配個數(shù)據(jù)流都不好意思了。關(guān)于的用法，這只是基礎(chǔ)入門的部分，還有的多的搞基操作，比如異步數(shù)據(jù)流和配合。 redux —— 入門實例 TodoListshowImg(https://segmentfault.com/img/bVtSeH); Tip 前端技術(shù)真是日新月異，搞完 React 不搭配個數(shù)據(jù)流都不好意思了。滿懷期待的心去翻了翻 flux，簡直...

    SKYZACK 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<