react?redux的原理以及基礎使用講解
更新時間：2022年08月04日 11:50:22 作者：web前端?zxp
這篇文章主要介紹了react?redux的原理以及基礎使用講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
介紹
為什么會使用 redux？
vue 是一個 MVVM層，可以實現(xiàn) 雙向數(shù)據綁定，而 react 只能算一個 view 層，狀態(tài)改變了只有去調用setState({xxx}) 才能去修改視圖，當我們數(shù)據很復雜的時候可能需要用到 redux
什么時候該使用 redux？
如果你不知道是否需要 Redux，那就是不需要它
只有遇到 React 實在解決不了的問題，你才需要 Redux
redux使用場景
用戶的使用方式復雜不同身份的用戶有不同的使用方式（比如普通用戶和管理員）多個用戶之間可以協(xié)作與服務器大量交互，或者使用了WebSocketView要從多個來源獲取數(shù)據
redux 作用
Web 應用是一個狀態(tài)機，視圖與狀態(tài)是一一對應的（有一方改變另一方也會改變）。
所有的狀態(tài)，保存在一個對象里面
工作流程
使用
1.下載
yarn add redux
2.創(chuàng)建倉庫store骨架
按圖示創(chuàng)建即可
3.生成倉庫
import { createStore } from 'redux';
const store = createStore(fn);
通過 creatStore 方法接收一個函數(shù)作為參數(shù)，最終返回一個倉庫
4.參數(shù)函數(shù)的創(chuàng)建 reducer
可以接收之前的狀態(tài) 和 action ，最終返回一個新狀態(tài)
需要定義一個純函數(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以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了React項目中eslint使用百度風格,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了React中項目路由配置與跳轉方法的相關資料，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以了解一下2023-08-08
作為一個前端開發(fā)時刻想著，怎么把自己寫的東西，丟到自己的服務器上面，然后展示給別人看。下面我就簡單直白的寫下，這篇文章主要給大家介紹了關于nginx配置React靜態(tài)頁面的方法教程,需要的朋友可以參考下。2017-11-11
這篇文章主要為大家詳細介紹了React的事件處理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
淺談React的React.FC與React.Component的使用
本文主要介紹了React的React.FC與React.Component的使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Context?提供了一個無需為每層組件手動添加?props,就能在組件樹間進行數(shù)據傳遞的方法,本文為大家整理了React使用Context的一些優(yōu)化建議,希望對大家有所幫助2024-04-04
在React應用中,App.js文件通常是項目的根組件文件,它負責組織和渲染其他組件,是應用的核心部分,本文將詳細介紹App.js文件的結構、作用和最佳實踐,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要給大家介紹了關于解決webpack -p壓縮打包react報語法錯誤的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
React如何利用Antd的Form組件實現(xiàn)表單功能詳解
這篇文章主要給大家介紹了關于React如何利用Antd的Form組件實現(xiàn)表單功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
歡迎來到今天的探險之旅！在這篇博客中,我們將深入了解 React 中神奇的虛擬DOM,并通過一個簡單的例子來揭開其神秘面紗,文中通過代碼示例也講解非常詳細,感興趣的朋友可以參考下2024-01-01