react redux學習(一)

zhangfaliang 發布于2019-08-23 16:51 / 2027人閱讀

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

項目目錄

1、安裝redux yarn add redux 2、創建store

列表項目創建store文件夾

文件夾下創建index.js

index.js

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

3、創建reducer.js

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

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

5、store中如何獲取reducer的數據，及改變

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

6、組件中如何獲取store數據

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

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

7、如何改變store的數據

創建action const action = { type:"input_action",val:val};

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

8、如何監聽 store的數據改變，刷新dom

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

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

9、優化action的type,報錯可以定位

創建actionTypes.js

export const CHANGE_INPUT_VALUE = "change_input_value";

10、優化actionCreator.js,統一管理組件的action

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

11、優化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
        }
    }

GPU云服務器云服務器 react-redux React_Redux_Appointm react-router-redux Redux

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

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

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

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

txgcwm 2019-08-22 11:06 評論0 收藏0
React,Redux學習筆記

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

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

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

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

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

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

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

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

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

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