亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React-Redux 入門教程

xuweijian / 1066人閱讀

摘要：具體了解此方法可以請(qǐng)戳這里最后把對(duì)象暴露給在主入口進(jìn)行調(diào)用我們通過提供的頂層組件傳入然后把要展示的寫入頂層組件就行了，提供了整個(gè)全局的供所有的子組件進(jìn)行調(diào)用具體代碼實(shí)現(xiàn)請(qǐng)

項(xiàng)目目錄 

整個(gè)項(xiàng)目目錄分為圖中所示：
Redux分為{Action,Reducer,Store}
入口文件為App.jsx
項(xiàng)目效果 

從圖中可以看出整個(gè)組件可以分為3個(gè)組件，內(nèi)部Counter組件，計(jì)算Count的Summary的組件，以及整個(gè)容器組件ControlPanel
Content 
React Redux 事實(shí)上是兩個(gè)獨(dú)立的產(chǎn)品， 應(yīng)用可以使用 React 而不使用
Redux ，也可以使用 Redux 而不使用 React ，但是，如果兩者結(jié)合使用，沒有理由不使用
一個(gè)名叫 react-redux 的庫這個(gè)庫能夠大大簡化代碼的書寫;

react-redux 的兩個(gè)最主要功能：
connect ：連接數(shù)據(jù)處理組件和內(nèi)部UI組件；
Provider ：提供包含 store的context；
通過Content實(shí)現(xiàn)傳遞Store的目的
首先定義好

Action/index.jsx

export const Increment="increment"
export const Decrement="decrement"

export const increment=(counterCaption)=>({
    type:Increment,
    counterCaption
  }
)
export const decrement=(counterCaption)=>({
    type:Decrement,
    counterCaption
})

Reducer/index.jsx

import {Increment,Decrement} from "../Action"
export default(state,action)=>{
    const {counterCaption}=action
    switch (action.type){
        case Increment:
        return {...state,[counterCaption]:state[counterCaption]+1}
        case Decrement:
        return {...state,[counterCaption]:state[counterCaption]-1}
        default:
        return state
    }
}

Store/store.jsx

import {createStore} from "redux"
import reducer from "../Reducer" 
const initValue={
    "First":0,
    "Second":10,
    "Third":20
}
const store=createStore(reducer,initValue)
export default store
在action中我們會(huì)發(fā)現(xiàn)定義了兩個(gè)常量，一個(gè)控制增加，一個(gè)控制減少，然后暴露出增加減少的函數(shù)。這兩個(gè)函
數(shù)可以在Couter組件中調(diào)用

Counter.jsx

import React, { Component } from "react"
import {increment,decrement} from "../Redux/Action"
import {connect} from "react-redux";
const buttonStyle = {
margin: "20px"
}

function Counter({caption, Increment, Decrement, value}){
return (
        

            
            
            {caption} count :{value}
        

    )
}
function mapState(state,ownProps){
return{
    value:state[ownProps.caption]
}
}
function mapDispatch(dispatch,ownProps){
return {
    Increment:()=>{
        dispatch(increment(ownProps.caption))
    },
    Decrement:()=>{
        dispatch(decrement(ownProps.caption))
    }

}
}

export default connect(mapState,mapDispatch)(Counter)
1.在counter組件中我們會(huì)發(fā)現(xiàn)引入了增加和減少這兩個(gè)函數(shù)，然后在mapDispatch函數(shù)中進(jìn)行調(diào)用，暴露出增               
  加和減少合并的一個(gè)對(duì)象，然后通過解構(gòu)在Counter函數(shù)組件中獲得傳遞過來的經(jīng)過mapDispath包裝過后的增
  加和減少組件。mapDispatch函數(shù)的作用就是把內(nèi)層函數(shù)組件的增加和減少的動(dòng)作派發(fā)給Store

然后我們轉(zhuǎn)過來看Reducer/index.jsx
  reducer是專門處理數(shù)據(jù)邏輯的，通過傳入（state,action），針對(duì)不同的action返回一個(gè)不同的store對(duì)象

Store/store.js

 是專門對(duì)store進(jìn)行的一個(gè)封裝，通過createStore方法傳入reducer和初始化state（initValue）來暴露        
 store對(duì)象，此對(duì)象非原始的store對(duì)象，該對(duì)象是對(duì)原始store進(jìn)行注冊(cè)，增加了若干方法。具體了解此方法可以**請(qǐng)戳這里**
[https://github.com/reactjs/redux/blob/master/src/createStore.js][1]
最后把store對(duì)象暴露給App.jsx在主入口進(jìn)行調(diào)用

import React, {Component, PropTypes} from "react";
import ReactDOM, {render} from "react-dom";
import store from "./Redux/Store/Store.jsx"
import {Provider} from "react-redux";
import ControlPanel from "./Component/ControlPanel.jsx"
import "./style/common.less"
render(
    
    
    ,
    document.body.appendChild(document.createElement("div"))
);
我們通過react-redux提供的頂層組件Provider傳入store然后把要展示的ControlPanel寫入頂層組件就行了，        
Provider提供了整個(gè)全局的store供所有的子組件進(jìn)行調(diào)用

具體代碼實(shí)現(xiàn)請(qǐng)git clone
https://github.com/jeromehan/...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84913.html

相關(guān)文章

  • react-redux插件入門

    摘要：描述這個(gè)插件可以讓我們的代碼更加的簡潔和美觀。安裝使用提供了兩個(gè)重要的接口使用了這個(gè)插件，的和就可以忘記來，它們就用不著了?，F(xiàn)在有美女個(gè)。 可先查看我的redux簡單入門 react-redux簡介 react-redux是使用redux開發(fā)react時(shí)使用的一個(gè)插件，另外插一句，redux不是react的產(chǎn)品，vue和angular中也可以使用redux；下面簡單講解，如何使用rea...

    Baaaan 評(píng)論0 收藏0

  • React-Redux 中文文檔

    摘要：介紹快速開始是的官方綁定庫。通常你可以以下面這種方式調(diào)用方法基礎(chǔ)教程為了進(jìn)一步了解如何實(shí)際使用，我們將一步一步創(chuàng)建一個(gè)一個(gè)實(shí)例跳轉(zhuǎn)到 介紹 快速開始 React-Redux是Redux的官方React綁定庫。它能夠使你的React組件從Redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以更新數(shù)據(jù) 安裝 在你的React app中使用React-Redux： npm i...

    MobService 評(píng)論0 收藏0

  • react-redux初級(jí)教程，純白話講述redux數(shù)據(jù)、開發(fā)流程整理，redux數(shù)據(jù)持久化實(shí)現(xiàn)

    摘要：日常項(xiàng)目直接使用是完全沒有問題的，可是隨著項(xiàng)目的日益壯大，組件數(shù)量的逐漸增長，組件之間的嵌套使得數(shù)據(jù)的管理越來越繁重。最后數(shù)據(jù)保存進(jìn)了中的，頁面也會(huì)根據(jù)的改變自動(dòng)更新。 以下文章均為個(gè)人近期所學(xué)心得，自學(xué)react、redux，逐漸找到自己的方向，現(xiàn)將自己的方向方式寫出來，以供大家學(xué)習(xí)參考，肯定會(huì)有不足，歡迎批評(píng)指正。 日常項(xiàng)目直接使用react是完全沒有問題的，可是隨著項(xiàng)目的日益壯大...

    gclove 評(píng)論0 收藏0

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

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

    FullStackDeveloper 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

xuweijian

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<