Redux學習日誌（一）

2021-08-15 00:26:17 字數 3722 閱讀 9548

redux中文文件：

阮一峰的網路學習日誌：

redux是js的狀態容器，提供可**化狀態管理

redux除了和react一起用之外還支援 其他介面庫

他體積小（2kb）而且沒有任何依賴

當ui層十分簡單，沒有很多互動，redux就是不必要的，用了反而增加複雜性

以上這些情況不需要使用

以上這些情況可以使用

如果應用不複雜可以不用一 web應用是乙個狀態機，檢視與狀態一一對應

二 所有的狀態，都儲存在乙個物件裡

store

store是儲存資料的地方，整個應用只能有乙個store

createstore函式可用來生成store

/*引入redux*/


import  from


"redux"


const store=createstore(fn)
state

store物件包含所有的資料，如果想要得到某個時間點的資料，就要對store生成快照，這種時點的集合就叫做state

/*引入redux*/


import  from


"redux";


const store=createstore(fn)


const state=store.getstate();
乙個state對應乙個view

action

state的變換帶動view的變化。但是使用者接觸不到state，使用者接觸到的是view層，當view層發生變化，會發出action，也就是說action是view發出的通知，表示state應該要產生變化

action是乙個物件，其中type屬性是必須的，表示action的名稱，其他屬性可自由設定，

const action=
action描述當前發生的事情，改變state是唯一的辦法，就是使用action，他會把資料運送到store

action creator

view要傳送多少種資訊，就會有多少種action，如果都手寫，比較的麻煩，可以定義乙個函式來生成action，這個函式就是action creater

const add_todo="新增 todo"；


function addtodo（params）


}const action=addtodo("learn redux")
addtodo函式就是乙個 action creator

store.dispatch()

store.dispatch()是view發出action的唯一方法

import  from "redux";


const store=createstore(fn);


store.dispatch()
結合以上的addtodo函式，可簡寫成

store.dispatch(addtodo("learn redux"))
store收到action之後，必須給出乙個新的state，這樣view才會發生變化，這種計算過程就叫做reducer

reducer是乙個函式，他接受action和當前的state作為引數，返回新的state，

const reducer=function(state,action)

這是乙個例子

const defaultstate=0;


const reducer=(state=defaultstate,action)=> 


}//  


const state=reducer(1,)


//輸出3
但在實際的應用中，並不會手動的呼叫readucer，store.dispatch方法會觸發readucer的自動執行。為此，store、需要知道readucer函式，所以需要在生成store的時候，將readucer傳入createstore方法

import  from


"redux"


const store=createstore(reducer);


//createstore接收reducerr作為引數，以後每當store.dispatch傳送過來乙個新的action，就會自動呼叫readucer，得到新的state。
reducer函式最重要的特徵，他是乙個純函式。也就是說，只要是同樣的輸入，必定得到同樣的輸出

純函式是函式式程式設計的概念，必須遵守一下一些約束，

函式式程式設計：函式是一等公民

store允許使用store.subscribe方法設定監聽函式，一旦state發生變化，就會自動執行這個函式

import  from


"redux";


const store=createstore(reducer)


store.subscribe(listener)
只要把view的更新函式放入listen，就會實現view的自動渲染

store.subscribe方法返回乙個函式，呼叫這個函式可以解除監聽

let unsubscribe=store.subscribe(()=>)


+ store.getstate()


+ store.dispatch()


+ store.subscribe()
在引入redux的時候

import  from


"redux";


let  = createstore(reducer)
createstore可以接受第二個引數
let store=createstore(fn,window.state_from_server)
window.state_from_server就是整個應用的初始值，如果提供這個引數，他會覆蓋reducer函式的初始預設值

const


createstore=(reducer)=>;


const


subscripbe=(listener)=>


};dispatch({});


return ;


}
reducer可生成state，整個應用只有乙個state物件，包含所有的資料，當state十分龐大的時候，reducer函式也十分龐大。

例如

const chatreducer=(state=defaultstate,action={})=>=action;


switch (type),state,);


case change_status:


return


object.assign({},state,);


case change_username:


return


object.assign({},state,);


default:return state;


}}
以上**中三種action分別改變state的三個屬性

import  from


"redux";


const chatreducer=combinereducer()
這段**的意思是combinereducer方法將三個reducer合併成乙個大的函式；

Redux學習總結一

參考阮一峰部落格 redux教程 web應用是乙個狀態機，檢視與狀態是一一對應的。所有狀態都儲存在乙個物件裡面。store是儲存資料的地方，可以將其看成乙個容器，整個應用只能有乙個store.state是store物件的某個時點的資料集合，當前時刻的state可以通過store.getstate 得...

Redux原始碼學習篇 一 redux實現

本文會逐步探索redux到應用分為3個系列 redux 實現 react redux 實現 redux中介軟體的應用與實現 案例場景 現在有乙個計數器，或者點讚場景 現在用redux如何記錄呢?import from redux action const like like const unlike...

redux學習心得（一）

redux 三個基本原則 唯一資料來源 保持狀態唯讀 資料改變只能通過純函式完成 應用的狀態資料應該只儲存在唯一的乙個store上。就是說不能直接去修改狀態，要修改store狀態，必須要派發乙個action物件完成。在redux中，每個reducer的函式簽名如下 reducer state,act...