react redux學(xué)習(xí)(一)

Lsnsh 發(fā)布于2019-08-29 18:34 / 1763人閱讀

摘要：項目目錄安裝創(chuàng)建列表項目創(chuàng)建文件夾文件夾下創(chuàng)建創(chuàng)建必須是純函數(shù)，純函數(shù)給定輸入，固定輸出，并且不能改變輸入中如何獲取的數(shù)據(jù)，及改變做如下修改組件中如何獲取數(shù)據(jù)組件中引入文件下的在中如何改變的數(shù)據(jù)創(chuàng)建改變數(shù)據(jù)返回一個新的數(shù)據(jù)如何監(jiān)聽的數(shù)據(jù)

項目目錄

1、安裝redux yarn add redux 2、創(chuàng)建store

列表項目創(chuàng)建store文件夾

文件夾下創(chuàng)建index.js

index.js

         import { createStore } from "redux";
         const store = createStore();
         export default store;

3、創(chuàng)建reducer.js

        const defaultState = {
            inputValue:""
        }
        export default (state = defaultState,action) => { return state }

reducer必須是純函數(shù)，純函數(shù)給定輸入，固定輸出，并且不能改變輸入

5、store中如何獲取reducer的數(shù)據(jù)，及改變

    //index.js做如下修改
    import { createStore } from "redux";
    import reducer from "./reducer"
    const store = createStore(reducer);
    export default store;

6、組件中如何獲取store數(shù)據(jù)

組件中引入store文件下的index.js

在constructor中 this.state = store.getState();

7、如何改變store的數(shù)據(jù)

創(chuàng)建action const action = { type:"input_action",val:val};

store.dispatch(action) -> store ->reducer改變store數(shù)據(jù) 返回一個新的state數(shù)據(jù)

8、如何監(jiān)聽 store的數(shù)據(jù)改變，刷新dom

組件中的constructor使用 store.subscribe(this.listener.bind(this));

listener () { this.setState(store.getState())};

9、優(yōu)化action的type,報錯可以定位

創(chuàng)建actionTypes.js

export const CHANGE_INPUT_VALUE = "change_input_value";

10、優(yōu)化actionCreator.js,統(tǒng)一管理組件的action

    import { CHANGE_INPUT_VALUE} from "./actionTypes"
    export const changeFocuse = (inputValue) => ({
        type:CHANGE_INPUT_VALUE,
        inputValue
    });

11、優(yōu)化reducer.js

    import { CHANGE_INPUT_VALUE} from "./actionTypes"
    const defaultState = {
        inputValue:""
    }
    export default (state = defaultState,action) => { 
        switch (action.type){
            case CHANGE_INPUT_VALUE:
                const newState = JSON.parse(JSON.stringify(state));
                newState.inputValue = action.inputValue;
                return newState;
            default:
                return state
        }
    }

云服務(wù)器 GPU云服務(wù)器 react-redux React_Redux_Appointm react-router-redux Redux

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114423.html

相關(guān)文章

【譯】Redux 還是 Mobx，讓我來解決你的困惑！

摘要：我現(xiàn)在寫的這些是為了解決和這兩個狀態(tài)管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數(shù)式編程是不斷上升的范式，但對于大部分開發(fā)者來說是新奇的。規(guī)模持續(xù)增長的應(yīng) 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 評論0 收藏0
React,Redux學(xué)習(xí)筆記

摘要：維護(hù)著一個全局的，并且根據(jù)來進(jìn)行事件分發(fā)處理。如果想和其它框架集成，使用或者來設(shè)置定時器，或者發(fā)送請求，可以在該方法中執(zhí)行這些操作。在該函數(shù)中調(diào)用將不會引起第二次渲染。在該方法中執(zhí)行任何必要的清理，比如無效的定時器，或者清除在中創(chuàng)建的元素。 @(StuRep)2016.06.10 React的PropTypes使用方法 React.PropTypes.array // 數(shù)組 Reac...

lauren_liuling 2019-08-22 10:38 評論0 收藏0
從設(shè)計的角度看 Redux

摘要：協(xié)調(diào)狀態(tài)的這三個方面是前端開發(fā)的重要組成部分，對這項任務(wù)有不同程度的支持。這使得保持高度統(tǒng)一。的真正威力到目前為止，看上去只是的輔助工具。在的術(shù)語中這稱之為派發(fā)動作。撤銷重做流行的撤銷重做功能需要系統(tǒng)級規(guī)劃。想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！你知道 Redux 真正的作用遠(yuǎn)不止?fàn)顟B(tài)管理嗎？你是否想要了解 Redux 的工作原理？讓我們深入研究 ...

fantix 2019-08-23 17:06 評論0 收藏0
Byemess-基于React&redux的在線Todo應(yīng)用

摘要：在線注冊賬號，數(shù)據(jù)存儲于。年了，還不使用的異步控制體系。過度對數(shù)據(jù)模型進(jìn)行裝飾的結(jié)果便是高耦合，這跟我初衷是基于在線存儲數(shù)據(jù)有關(guān)。為什么又是Todo，全世界的初學(xué)者都在做todo嗎？可能很多人要問這句話，其實這句話可以等同于：為什么你做了個云音樂播放器？為什么你做了個新聞閱讀APP？為什么你做了個VUE/REACT版本的CNODE？究其本質(zhì)，這幾個應(yīng)用都是data-map...

MRZYD 2019-08-20 17:07 評論0 收藏0
React-redux基礎(chǔ)

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

jsyzchen 2019-08-23 15:09 評論0 收藏0
React 升級：Redux

摘要：正如我們前面的教程所提到的，在組件之間流通數(shù)據(jù)更確切的說，這被叫做單向數(shù)據(jù)流數(shù)據(jù)沿著一個方向從父組件流到子組件。這就是如何使數(shù)據(jù)流變得更簡單的原因。它是一種傾向單向數(shù)據(jù)流比如的設(shè)計模式。這是因為總是接受和返回狀態(tài)用來更新。前言近期接觸React項目，學(xué)到許多新知識點，網(wǎng)上教程甚多，但大多都把知識點分開來講，初學(xué)者容易陷入學(xué)習(xí)的誤區(qū)，摸不著頭腦，本人在學(xué)習(xí)中也遇到許多坑。此篇文章是筆...

garfileo 2019-08-20 15:44 評論0 收藏0