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

資訊專欄INFORMATION COLUMN

React-Redux 入門教程

xuweijian / 1018人閱讀

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

項目目錄 

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

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

react-redux 的兩個最主要功能：
connect ：連接數(shù)據(jù)處理組件和內(nèi)部UI組件；
Provider ：提供包含 store的context；
通過Content實現(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中我們會發(fā)現(xiàn)定義了兩個常量，一個控制增加，一個控制減少，然后暴露出增加減少的函數(shù)。這兩個函
數(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組件中我們會發(fā)現(xiàn)引入了增加和減少這兩個函數(shù)，然后在mapDispatch函數(shù)中進行調(diào)用，暴露出增               
  加和減少合并的一個對象，然后通過解構(gòu)在Counter函數(shù)組件中獲得傳遞過來的經(jīng)過mapDispath包裝過后的增
  加和減少組件。mapDispatch函數(shù)的作用就是把內(nèi)層函數(shù)組件的增加和減少的動作派發(fā)給Store

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

Store/store.js

 是專門對store進行的一個封裝，通過createStore方法傳入reducer和初始化state（initValue）來暴露        
 store對象，此對象非原始的store對象，該對象是對原始store進行注冊，增加了若干方法。具體了解此方法可以**請戳這里**
[https://github.com/reactjs/redux/blob/master/src/createStore.js][1]
最后把store對象暴露給App.jsx在主入口進行調(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提供了整個全局的store供所有的子組件進行調(diào)用

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

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

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

相關(guān)文章

  • react-redux插件入門

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

    Baaaan 評論0 收藏0

  • React-Redux 中文文檔

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

    MobService 評論0 收藏0

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

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

    gclove 評論0 收藏0

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

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

    FullStackDeveloper 評論0 收藏0

發(fā)表評論

0條評論

xuweijian

男|高級講師

TA的文章

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