react-redux插件入門

Baaaan 發布于2019-08-22 16:28 / 3562人閱讀

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

可先查看我的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就可以了。

GPU云服務器云服務器 react-redux 插件工具插件清理日歷插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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