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

資訊專欄INFORMATION COLUMN

react-redux初探理解

ziwenxie / 1883人閱讀

摘要：它的作用就是像它的名字那樣，建立一個(gè)從外部的對象到組件的對象的映射關(guān)系。比如表示從整個(gè)的表示當(dāng)前組件容器的用來建立組件的參數(shù)到方法的映射比如表示它定義了哪些用戶的操作應(yīng)該當(dāng)作，傳給。

最近做的項(xiàng)目加入了react-redux,對react-redux一直沒理解透徹，最近有時(shí)間把react-redux梳理了一番，希望能夠幫助到大家，

首先有這幾個(gè)文件，action,reducer,sage,組件，這幾個(gè)文件組成,下面來一一說說

Reducer==>純函數(shù)，只承擔(dān)計(jì)算 State 的功能，不合適承擔(dān)其他功能，也承擔(dān)不了，因?yàn)槔碚撋?，純函?shù)不能進(jìn)行讀寫操作,比如：
import * as Act from "actions";

const initState = {

}

export default function keepplan(state = initState, action) {
  switch(action.type) {
    // case Act.SET_USER_LIST:
    //     return Object.assign({}, state, {
    //         user_list: action.user_list
    //     });
    default:
      return state;
  }
}
Action==>存放數(shù)據(jù)的對象，即消息的載體，只能被別人操作，自己不能進(jìn)行任何操作。比如：
export const KEEP_PLAN_COMMON_METHOD = "keep_plan_common_method";
sage==>是處理異步的一個(gè)action，使用的是Generator，里面封裝了一些方法，比如：
takeEvery(pattern, saga, ...args) //在發(fā)起的 action 與 pattern 匹配時(shí)派生指定的 saga
takeLatest(pattern, saga, ..args) //只執(zhí)行最后一次saga任務(wù)，前面的都取消
take(pattern)
put(action)  //執(zhí)行dispatch
call(fn, ...args) //執(zhí)行異步函數(shù)
call([context, fn], ...args) //執(zhí)行異步函數(shù)
apply(context, fn, args) //執(zhí)行異步函數(shù)
cps(fn, ...args)
cps([context, fn], ...args)
fork(fn, ...args)
fork([context, fn], ...args)
join(task)
cancel(task)
select(selector, ...args)

sage只是返回了一個(gè)異步操作，然后一個(gè)回調(diào)如果想把值傳到state中，
需要調(diào)用yield put 再執(zhí)行一個(gè)dispatch,然后執(zhí)行reducer里面的操作，在reducer里面再執(zhí)行
return Object.assign({}, state, {...action.params});
mapStateToProps是一個(gè)函數(shù)。它的作用就是像它的名字那樣，建立一個(gè)從（外部的）state對象到（UI 組件的）props對象的映射關(guān)系。比如：
state表示從整個(gè)state的
ownProps表示當(dāng)前組件容器的props
mapStateToProps=(state,ownProps)=>{
    return {
        types: state.types,
    }
}
mapDispatchToProps 用來建立 UI 組件的參數(shù)到store.dispatch方法的映射,比如：
dispatch表示它定義了哪些用戶的操作應(yīng)該當(dāng)作 Action，傳給 Store。
ownProps表示當(dāng)前組件容器的props
function mapDispatchToProps(dispatch,ownProps){
    return {
        onClick: () => {
            dispatch({
                type: "SET_VISIBILITY_FILTER",
                filter: ownProps.filter
            });
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Home);

每天進(jìn)步一點(diǎn)，希望大家喜歡，也希望喜歡的朋友點(diǎn)個(gè)贊，后續(xù)繼續(xù)更新...

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

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

相關(guān)文章

  • Redux-saga 初探

    摘要：背景項(xiàng)目用的是全家桶，之前有同事用改進(jìn)了一波，一直都沒去研究。這次的打算寫一個(gè)輸入框，輸入拼音會(huì)返回對應(yīng)的城市列表。 背景 項(xiàng)目用的是react全家桶， 之前有同事用redux-saga 改進(jìn)了一波， 一直都沒去研究。 前幾天趁有空，也去學(xué)習(xí)了下， 寫了個(gè)簡單的demo練練手， 在這里簡單分享一下。 這次的demo打算寫一個(gè)輸入框，輸入拼音會(huì)返回對應(yīng)的城市列表。并盡可能多的使用redu...

    yuanxin 評論0 收藏0

  • 快速理解react-redux

    摘要：和的結(jié)合簡述相信很多前端開發(fā)者都聽說或使用過，我曾寫過一篇關(guān)于快速理解的文章，雖說是快速理解，但實(shí)際上更應(yīng)該叫做復(fù)習(xí)吧。它通過高階函數(shù)，純函數(shù)使我們在編寫組件時(shí)完全不用接觸相關(guān)內(nèi)容，只通過將組件和數(shù)據(jù)連接起來即可。 react-redux react和redux的結(jié)合 簡述 相信很多前端開發(fā)者都聽說或使用過react-redux，我曾寫過一篇關(guān)于快速理解redux的文章，雖說是快...

    MoAir 評論0 收藏0

  • 對React-redux中connect方法的理解

    摘要：應(yīng)用中唯一的狀態(tài)應(yīng)用的子組件例子方法來看下函數(shù)到底是如何將和組件聯(lián)系在一起的，注意到文檔中有這樣的一句話并不會(huì)改變它連接的組件，而是提供一個(gè)經(jīng)過包裹的組件。 關(guān)于React-redux Redux是React全家桶的重要一員，之前在知乎上也看到類似的提問：該如何通俗易懂的理解Redux? Redux是JavaScript的狀態(tài)容器，Redux的概念簡單明了： 1. 應(yīng)用中所有的狀...

    Bryan 評論0 收藏0

  • 對redux和react-redux的理解和總結(jié)（一）

    摘要：使得在變化和異步中可預(yù)測。它是數(shù)據(jù)的唯一來源。指定了應(yīng)用狀態(tài)的變化如何響應(yīng)并發(fā)送到的，只是描述了有事情發(fā)生了這一事實(shí)，并沒有描述應(yīng)用如何更新。更新的函數(shù)稱為，它是一個(gè)純函數(shù)，接受舊的和，返回新的。是和之間的橋梁，是把它們聯(lián)系到一起的對象。 為什么使用redux 隨著前端單頁面開發(fā)越來越復(fù)雜，javascript需要管理越來越多的狀態(tài)state。如果一個(gè)model的變化引起另一個(gè)mode...

    skinner 評論0 收藏0

  • React-redux基礎(chǔ)

    摘要：簡介創(chuàng)建的函數(shù)，返回一個(gè)對象，包含等方法合并多個(gè)中間件處理，在實(shí)際的前調(diào)用一系列中間件，類似于綁定和函數(shù)式編程中常見的方法，介紹官方提供的綁定庫。 前言 在學(xué)習(xí)了React之后， 緊跟著而來的就是Redux了~ 在系統(tǒng)性的學(xué)習(xí)一個(gè)東西的時(shí)候， 了解其背景、設(shè)計(jì)以及解決了什么問題都是非常必要的。接下來記錄的是， 我個(gè)人在學(xué)習(xí)Redux時(shí)的一些雜七雜八~ Redux是什么 通俗理解 h...

    jsyzchen 評論0 收藏0

發(fā)表評論

0條評論

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