React詳解--react之redux

2021-12-09 開課吧技術團隊

React的最後一篇基礎課出來啦,前三節三金幫大家放到了專輯裡,大家喜歡的可以去看喲。

Redux 是一個獨立的 JavaScript 狀態管理庫。曾經有人說過這樣一句話。

"如果你不知道是否需要 Redux,那就是不需要它。"

Redux 的創造者 Dan Abramov 又補充了一句。

"只有遇到 React 實在解決不了的問題,你才需要 Redux 。"

首先,我們要理解 Redux 幾個核心概念與它們之間的關係:

○store

○state

○action

○reducer

StoreStore就是保存數據的地方,你可以把它看成一個容器。整個應用只能有一個Store。

Redux提供createStore這個函數,用來生成Store:

上面代碼中,createStore函數接受另一個函數作為參數,返回新生成的 Store 對象。

stateStore對象包含所有數據。如果想得到某個時點的數據,就要對Store生成快照。

這種時點的數據集合,就叫做State。

當前時刻的State,可以通過store.getState()拿到:

Redux 規定, 一個 State 對應一個 View。只要 State 相同,View 就相同。你知道 State,就知道 View 是什麼樣,反之亦然。

state是只讀的。

這裡需要注意的是,為了保證數據狀態的可維護和測試,不推薦直接修改state中的原數據。

什麼是純函數?

1、相同的輸入永遠返回相同的輸出

2、不修改函數的輸入值

3、不依賴外部環境狀態

4、無任何副作用

使用純函數的好處?

1、便於測試

2、有利重構

ActionState 的變化,會導致 View 的變化。但是,用戶接觸不到 State,只能接觸到 View。

所以,State 的變化必須是 View 導致的。Action 就是 View 發出的通知,表示 State 應該要發生變化了。

Action 是一個對象。其中的type屬性是必須的,表示 Action 的名稱。

其他屬性可以自由設置:

Action CreatorView 要發送多少種消息,就會有多少種 Action。

如果都手寫,會很麻煩。

可以定義一個函數來生成 Action,這個函數就叫 Action Creator。

store.dispatch()store.dispatch()是 View 發出 Action 的唯一方法。

結合 Action Creator,這段代碼可以改寫如下。

store.dispatch(addTodo('LearnRedux'));

ReducerStore 收到 Action 以後,必須給出一個新的 State,這樣 View 才會發生變化。

這種 State 的計算過程就叫做 Reducer。

Reducer 是一個函數,它接受 Action 和當前 State 作為參數,返回一個新的 State:

整個應用的初始狀態,可以作為 State 的默認值。

下面是一個實際的例子:

store.subscribe()Store 允許使用store.su-bscribe方法設置監聽函數。

一旦 State 發生變化,就自動執行這個函數。

顯然,只要把 View 的更新函數(對於 React 項目,就是組件的render方法或setState方法)放入listen,就會實現 View 的自動渲染。

store.subscribe方法返回一個函數,調用這個函數就可以解除監聽:

Reducer 函數負責生成 State。

由於整個應用只有一個 State 對象,包含所有數據,對於大型應用來說。

這個 State 必然十分龐大,導致 Reducer 函數也十分龐大。

請看下面的例子:

上面代碼中,三種 Action 分別改變 State 的三個屬性:

ADD_CHAT:chatLog屬性

CHANGE_STATUS:statusMessage屬性

CHANGE_USERNAME:userName屬性這三個屬性之間沒有聯繫。

這提示我們可以把 Reducer 函數拆分。

不同的函數負責處理不同屬性,最終把它們合併成一個大的 Reducer 即可。

Redux 提供了一個combineReducers方法,用於 Reducer 的拆分。

你只要定義各個子 Reducer 函數,然後用這個方法,將它們合成一個大的 Reducer:

這種寫法有一個前提,就是 State 的屬性名必須與子 Reducer 同名。

如果不同名,就要採用下面的寫法:

你可以把所有子 Reducer 放在一個文件裡面,然後統一引入:

然後,Store 自動調用 Reducer,並且傳入兩個參數:

當前 State 和收到的 Action。 

Reducer 會返回新的 State 。

State 一旦有變化,Store 就會調用監聽函數。

listener可以通過store.getState()得到當前狀態。

如果使用的是 React,這時可以觸發重新渲染 View。

Provider 組件:

想在 React 中使用 Redux ,還需要通過 react-redux 提供的 Provider 容器組件把 store 注入到應用中

connect 方法:

有了 connect 方法,我們不需要通過 props 一層層的進行傳遞, 類似路由中的 withRouter 

我們只需要在用到 store 的組件中,通過 react-redux 提供的 connect 方法。

把 store 注入到組件的 props 中就可以使用了

connect 方法的第一個參數是一個函數

該函數的第一個參數就是 store 中的 state : store.getState()

該函數的返回值將被解構賦值給 props : this.props.items

redux-chunk

這是一個把同步 dispatch 變成異步 dispatch 的中間件。

安裝:

到這裡,關於React的基礎篇就全部更新完啦~

接下來我們會製作一系列關於【圖形選擇】的乾貨文章,非常適合需要夯實前端基礎的同學!

對於前端基礎較高的同學,我們也會為大家分享優質、深入的前端領域乾貨

還有非常實用的小道具推薦,還有每周五必更的【三金叨叨叨】

更多好文都在【開課吧前端團隊】

再次感謝各位小夥伴的支持~


相關焦點

  • 2019 React Redux 完全指南
    使用 React-Redux 將數據連接到任何組件使用 react-redux 的 connect 函數,你可以將任何組件插入 Redux 的 store 以及取出需要的數據。搜索 redux 添加依賴,然後再次點擊 Add Dependency 搜索 react-redux 添加。在本地項目,你可以通過 Yarn 或者 NPM 安裝:npm install —save redux react-redux。
  • 60+ 實用 React 工具庫,助力你高效開發!
    npm地址:https://www.npmjs.com/package/react-virtualized二、狀態管理1. reduxRedux 是 JavaScript 狀態容器,提供可預測化的狀態管理。
  • React 靈魂 23 問,你能答對幾個?
    為了降低時間複雜度,react 的 diff 算法做了一些妥協,放棄了最優解,最終將時間複雜度降低到了 O(n)。那麼 react diff 算法做了哪些妥協呢?如果沒有 $$typeof 這個屬性,react 會拒絕處理該元素。
  • 一名 Vue 程式設計師總結的 React 基礎
    withRouter: 可獲取 history,一些路由信息redux connect 連接 React 組件與 Redux store,給組件掛載 dispatch 方法。使用姿勢import React from "react";import { connect } from "react-redux";const ReduxDemo: React.FC = (props) => {  const addCount = () => {    const { dispatch
  • 徹底讓你理解redux
    這裡簡單介紹下Redux以及其與react結合的使用方法我們為什麼需要Redux,什麼是Reduxstatestate才是真正的前端資料庫,它存儲著這個應用所有需要的數據。 這裡拿一個簡單的例子說明下,為什麼說簡單的例子呢,因為簡單到不應該使用redux。。。
  • 【Hooks】:[組]Awesome React Hooks
    /medium.com/@dispix/from-react-component-to-hooks-b50241334365React Hooks: What's going to happen to my tests?
  • 使用React、Electron、Dva、Webpack、Node.js、Websocket快速構建跨平臺應用
    談談技術選型使用React去做底層的UI繪製,大項目首選React+TS狀態管理的最佳實踐肯定不是Redux,目前首選dva,或者redux-saga。/index.html'], vendor: ['react']        }忽略Electron中的代碼,不用webpack打包(因為Electron中有後臺模塊代碼,打包就會報錯)externals: [ (function () {
  • 手寫React-Router源碼,深入理解其原理
    React-Router應用,感覺跟以前寫過的react-redux的Provider類似,我猜是用來注入context之類的。看起來我們要搞懂react-router-dom的源碼還必須得去看react-router和history的源碼,現在我們手上有好幾個需要搞懂的庫了,為了看懂他們的源碼,我們得先理清楚他們的結構關係。
  • 從 Vue2.0 到 React17 —— React 開發入門
    'head' : ''}`}        style={this.state.styleData}      >        hello world      </div>    );  }}import { useState } from 'react
  • 精通react/vue組件設計之配合React Portals實現一個(Drawer)組件
    通過組件的設計過程,大家會接觸到一個完成健壯的組件設計思路和方法,也能在實現組件的過程逐漸對react/vue的高級知識和技巧有更深的理解和掌握,並且在企業實際工作做遊刃有餘.作為數據驅動的領導者react/vue等MVVM框架的出現,幫我們減少了工作中大量的冗餘代碼, 一切皆組件的思想深得人心.
  • 【英】新版 React DevTools 簡介
    react-domreact-nativeHow do I get the new DevTools?React DevTools is available as an extension for Chrome and Firefox.
  • React 輪播動畫探索
    ={() =>console.log("slide change")} autoplay={{ delay: 3000, reverseDirection: true }} loop speed={3000} effect={"creative"} creativeEffect={{ prev:
  • React.js 性能分析
    當然也可以使用多個 Profiler 來分別追蹤應用中的各個不同的部分,示例代碼如下:import React, { Fragment, unstable_Profiler as Profiler} from "react
  • 對Redux一頭霧水?看完這篇就懂了
    然後使用 yarn 或 npm 安裝兩個包:redux和react-redux,然後就可以開始了!還有一個稱為redux-devtools-extension的開發依賴項,它可以確保你的 Redux 應用以你想要的方式工作。但它是可選的,如果你不想安裝也沒問題。
  • 超性感的React Hooks(三):useState
    我們可以在父組件中定義state,並通過props的方式傳遞到子組件。name}</div>, <div>age: {age}</div> ]}export default Demo;2. props的每次變動,組件都會重新渲染一次,函數重新執行。
  • 28個頂級的React UI組件庫,請查收!
    地址:https://github.com/react-bootstrap/react-bootstrapReact Toolbox 也是一組實現谷歌 Material Design 的 React 組件。
  • 新手入門系列之-React / Vue 應用持續集成Docker 化
    樸素的Dockerfile 首先準備一個有標準運行指令的Web應用,用腳手架creat-react-app或Vue CLI等生成的即可。react-docker 可以替換為你要為鏡像命名的任何值。docker build -t react-docker .
  • React-Router v6 新特性解讀及遷移指南
    新鉤子useRoutes代替react-router-config。1. <Switch>重命名為<Routes>該頂級組件將被重命名。但是,其功能大部分保持不變(嗨,瞎折騰)。
  • React v17.0 正式發布!
    安裝使用 npm 安裝 React v17:npm install react@17.0.0 react-dom@17.0.0使用 yarn 安裝 React v17:yarn add react@17.0.0 react-dom@17.0.0我們還提供了由 UMD 構建的 CDN 版本:<script crossorigin src="https://unpkg.com/react@17.0.0/umd/react.production.min.js
  • 什麼是NIKE REACT?
    上腳搭在react的兩雙新鞋的時候,不管是在NIKE REACT Hyperdunk 2017還是在Jordan Super.Fly 2017中,都會感受到非常親和,柔軟的鞋墊。直到站起來之後,才發現——怎麼那麼硬?