React-Redux 入門教程

xuweijian 發布于2019-08-20 18:56 / 1014人閱讀

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

項目目錄

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

項目效果

從圖中可以看出整個組件可以分為3個組件，內部Counter組件，計算Count的Summary的組件，以及整個容器組件ControlPanel

Content

React Redux 事實上是兩個獨立的產品， 應用可以使用 React 而不使用
Redux ，也可以使用 Redux 而不使用 React ，但是，如果兩者結合使用，沒有理由不使用
一個名叫 react-redux 的庫這個庫能夠大大簡化代碼的書寫;

react-redux 的兩個最主要功能：
connect ：連接數據處理組件和內部UI組件；
Provider ：提供包含 store的context；
通過Content實現傳遞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中我們會發現定義了兩個常量，一個控制增加，一個控制減少，然后暴露出增加減少的函數。這兩個函
數可以在Couter組件中調用

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組件中我們會發現引入了增加和減少這兩個函數，然后在mapDispatch函數中進行調用，暴露出增               
  加和減少合并的一個對象，然后通過解構在Counter函數組件中獲得傳遞過來的經過mapDispath包裝過后的增
  加和減少組件。mapDispatch函數的作用就是把內層函數組件的增加和減少的動作派發給Store

然后我們轉過來看Reducer/index.jsx
  reducer是專門處理數據邏輯的，通過傳入（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在主入口進行調用

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供所有的子組件進行調用

具體代碼實現請git clone
https://github.com/jeromehan/...

GPU云服務器云服務器 react-redux linux教程入門教程入門教程編程入門教程

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84913.html

react-redux插件入門

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

Baaaan 2019-08-22 16:28 評論0 收藏0
React-Redux 中文文檔

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

MobService 2019-08-26 13:22 評論0 收藏0
react-redux初級教程，純白話講述redux數據、開發流程整理，redux數據持久化實現

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

gclove 2019-08-23 10:50 評論0 收藏0
手挽手帶你學React：四檔（下篇）一步一步學會react-redux

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

FullStackDeveloper 2019-08-23 15:11 評論0 收藏0