摘要:項(xiàng)目目錄安裝創(chuàng)建列表項(xiàng)目創(chuàng)建文件夾文件夾下創(chuàng)建創(chuàng)建必須是純函數(shù),純函數(shù)給定輸入,固定輸出,并且不能改變輸入中如何獲取的數(shù)據(jù),及改變做如下修改組件中如何獲取數(shù)據(jù)組件中引入文件下的在中如何改變的數(shù)據(jù)創(chuàng)建改變數(shù)據(jù)返回一個(gè)新的數(shù)據(jù)如何監(jiān)聽的數(shù)據(jù)
項(xiàng)目目錄 1、安裝redux yarn add redux 2、創(chuàng)建store
列表項(xiàng)目創(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ù) 返回一個(gè)新的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,報(bào)錯(cuò)可以定位創(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 } }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/54868.html
摘要:我現(xiàn)在寫的這些是為了解決和這兩個(gè)狀態(tài)管理庫(kù)之間的困惑。這甚至是危險(xiǎn)的,因?yàn)檫@部分人將無(wú)法體驗(yàn)和這些庫(kù)所要解決的問(wèn)題。這肯定是要第一時(shí)間解決的問(wèn)題。函數(shù)式編程是不斷上升的范式,但對(duì)于大部分開發(fā)者來(lái)說(shuō)是新奇的。規(guī)模持續(xù)增長(zhǎng)的應(yīng) 原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用...
摘要:維護(hù)著一個(gè)全局的,并且根據(jù)來(lái)進(jìn)行事件分發(fā)處理。如果想和其它框架集成,使用或者來(lái)設(shè)置定時(shí)器,或者發(fā)送請(qǐng)求,可以在該方法中執(zhí)行這些操作。在該函數(shù)中調(diào)用將不會(huì)引起第二次渲染。在該方法中執(zhí)行任何必要的清理,比如無(wú)效的定時(shí)器,或者清除在中創(chuàng)建的元素。 @(StuRep)2016.06.10 React的PropTypes使用方法 React.PropTypes.array // 數(shù)組 Reac...
摘要:協(xié)調(diào)狀態(tài)的這三個(gè)方面是前端開發(fā)的重要組成部分,對(duì)這項(xiàng)任務(wù)有不同程度的支持。這使得保持高度統(tǒng)一。的真正威力到目前為止,看上去只是的輔助工具。在的術(shù)語(yǔ)中這稱之為派發(fā)動(dòng)作。撤銷重做流行的撤銷重做功能需要系統(tǒng)級(jí)規(guī)劃。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你! 你知道 Redux 真正的作用遠(yuǎn)不止?fàn)顟B(tài)管理嗎? 你是否想要了解 Redux 的工作原理? 讓我們深入研究 ...
摘要:在線注冊(cè)賬號(hào),數(shù)據(jù)存儲(chǔ)于。年了,還不使用的異步控制體系。過(guò)度對(duì)數(shù)據(jù)模型進(jìn)行裝飾的結(jié)果便是高耦合,這跟我初衷是基于在線存儲(chǔ)數(shù)據(jù)有關(guān)。 為什么又是Todo,全世界的初學(xué)者都在做todo嗎?可能很多人要問(wèn)這句話,其實(shí)這句話可以等同于: 為什么你做了個(gè)云音樂(lè)播放器? 為什么你做了個(gè)新聞閱讀APP? 為什么你做了個(gè)VUE/REACT版本的CNODE? 究其本質(zhì),這幾個(gè)應(yīng)用都是data-map...
摘要:簡(jiǎn)介創(chuàng)建的函數(shù),返回一個(gè)對(duì)象,包含等方法合并多個(gè)中間件處理,在實(shí)際的前調(diào)用一系列中間件,類似于綁定和函數(shù)式編程中常見的方法,介紹官方提供的綁定庫(kù)。 前言 在學(xué)習(xí)了React之后, 緊跟著而來(lái)的就是Redux了~ 在系統(tǒng)性的學(xué)習(xí)一個(gè)東西的時(shí)候, 了解其背景、設(shè)計(jì)以及解決了什么問(wèn)題都是非常必要的。接下來(lái)記錄的是, 我個(gè)人在學(xué)習(xí)Redux時(shí)的一些雜七雜八~ Redux是什么 通俗理解 h...
摘要:正如我們前面的教程所提到的,在組件之間流通數(shù)據(jù)更確切的說(shuō),這被叫做單向數(shù)據(jù)流數(shù)據(jù)沿著一個(gè)方向從父組件流到子組件。這就是如何使數(shù)據(jù)流變得更簡(jiǎn)單的原因。它是一種傾向單向數(shù)據(jù)流比如的設(shè)計(jì)模式。這是因?yàn)榭偸墙邮芎头祷貭顟B(tài)用來(lái)更新。 前言 近期接觸React項(xiàng)目,學(xué)到許多新知識(shí)點(diǎn),網(wǎng)上教程甚多,但大多都把知識(shí)點(diǎn)分開來(lái)講,初學(xué)者容易陷入學(xué)習(xí)的誤區(qū),摸不著頭腦,本人在學(xué)習(xí)中也遇到許多坑。此篇文章是筆...
閱讀 3259·2021-09-22 15:58
閱讀 1724·2019-08-30 14:17
閱讀 1729·2019-08-28 18:05
閱讀 1514·2019-08-26 13:33
閱讀 693·2019-08-26 12:20
閱讀 616·2019-08-26 12:18
閱讀 3198·2019-08-26 11:59
閱讀 1412·2019-08-26 10:36