react?redux的原理以及基礎(chǔ)使用講解
介紹
為什么會使用 redux？
vue 是一個(gè) MVVM層，可以實(shí)現(xiàn) 雙向數(shù)據(jù)綁定，而 react 只能算一個(gè) view 層，狀態(tài)改變了只有去調(diào)用setState({xxx}) 才能去修改視圖，當(dāng)我們數(shù)據(jù)很復(fù)雜的時(shí)候可能需要用到 redux
什么時(shí)候該使用 redux？
如果你不知道是否需要 Redux，那就是不需要它
只有遇到 React 實(shí)在解決不了的問題，你才需要 Redux
redux使用場景
用戶的使用方式復(fù)雜不同身份的用戶有不同的使用方式（比如普通用戶和管理員）多個(gè)用戶之間可以協(xié)作與服務(wù)器大量交互，或者使用了WebSocketView要從多個(gè)來源獲取數(shù)據(jù)
redux 作用
Web 應(yīng)用是一個(gè)狀態(tài)機(jī)，視圖與狀態(tài)是一一對應(yīng)的（有一方改變另一方也會改變）。
所有的狀態(tài)，保存在一個(gè)對象里面
工作流程
使用
1.下載
yarn add redux
2.創(chuàng)建倉庫store骨架
按圖示創(chuàng)建即可
3.生成倉庫
import { createStore } from 'redux';
const store = createStore(fn);
通過 creatStore 方法接收一個(gè)函數(shù)作為參數(shù)，最終返回一個(gè)倉庫
4.參數(shù)函數(shù)的創(chuàng)建 reducer
可以接收之前的狀態(tài) 和 action ，最終返回一個(gè)新狀態(tài)
需要定義一個(gè)純函數(shù)
const reducer = (prevState,action)=>{
let newState = prevState.todos.slice()
return newState
}
export default reducer
5.引入reducer來輔助store的創(chuàng)建
const store = createStore(reducer);
完整代碼展示
// ?store/index.js
import { createStore } from 'redux';
import reducer from "./reducer"
const store = createStore(reducer);
export default store// store/reducer.js
const reducer = (prevState,action)=>{
? ? let newState = prevState.todos.slice()
? ? return newState
}
export default ?reducer以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了React?Native與iOS?OC之間的交互示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
React相比于Vue，更注重對JS的掌握，Vue把能做的都做了，只剩下最簡單的讓開發(fā)者使用，開發(fā)者需要記憶Vue的特定指令后就可很輕松地開發(fā)。相反，React是提供了一種思路和方式，沒有過多的限制，但要求會相對高些，需要開發(fā)者對JS達(dá)到精通的地步才能真正運(yùn)用好React。2021-05-05
react的滑動(dòng)圖片驗(yàn)證碼組件的示例代碼
這篇文章主要介紹了react的滑動(dòng)圖片驗(yàn)證碼組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
Redux 是React最常用的集中狀態(tài)管理工具,本文主要介紹了React狀態(tài)管理的簡明指南,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
react antd-mobile ActionSheet+tag實(shí)現(xiàn)多選方式
這篇文章主要介紹了react antd-mobile ActionSheet+tag實(shí)現(xiàn)多選方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
react中關(guān)于Context/Provider/Consumer傳參的使用
這篇文章主要介紹了react中關(guān)于Context/Provider/Consumer傳參的使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦κ袌錾纤?JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了react獲取input輸入框的值的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
通過React-Native實(shí)現(xiàn)自定義橫向滑動(dòng)進(jìn)度條的 ScrollView組件
開發(fā)一個(gè)首頁擺放菜單入口的ScrollView可滑動(dòng)組件,允許自定義橫向滑動(dòng)進(jìn)度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序?yàn)榭v向由上至下依次排列,對React Native橫向滑動(dòng)進(jìn)度條相關(guān)知識感興趣的朋友一起看看吧2024-02-02
React?less?實(shí)現(xiàn)縱橫柱狀圖示例詳解
這篇文章主要介紹了React?less?實(shí)現(xiàn)縱橫柱狀圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09