redux概念 基礎

[ demo（基於react） 提取碼：b36i ]

demo網盤位址

（1）單一資料來源

（2）state是唯讀的

（3）使用純函式來執行修改

（1）定義及注意點

（2）寫法

新增新 todo 任務的 action 是這樣的：

const

add_todo
='add_todo'

import

from
'../actiontypes'

（2）寫法

function

addtodo
(text)
}

redux中只需要把action建立函式的結果傳給dispatch方法即可，發起一次dispatch過程

dispatch

(addtodo
(text)
)dispatch
(completetodo
(index)
)

const

boundaddtodo
= text =>
dispatch
(addtodo
(text)
)const
boundcompletetodo
= index =>
dispatch
(completetodo
(index)
)// 然後直接呼叫它們：
boundaddtodo
(text)
;boundcompletetodo
(index)
;

store 裡能直接通過 store.dispatch() 呼叫 dispatch() 方法，

但是多數情況下你會使用 react-redux 提供的 connect() 幫助器來呼叫。

bindactioncreators() 可以自動把多個 action 建立函式 繫結到 dispatch() 方法上。

（2）設計state結構

（3）action處理

;

(previousstate, action)
=> newstate

reducer 中不能做的：

修改傳入引數；

執行有***的操作，如 api 請求和路由跳轉；

呼叫非純函式，如 date.now() 或 math.random()。

function

(state = initialstate, action)
, state,
)default
:return state
}}

（1）定義

store 就是把 『 使用 reducers 來根據 action 更新 state 』』 聯絡到一起的物件。

store 職責：

（2）根據已有的 reducer 來建立 store

import

from
'redux'
'./reducers'
let store =
createstore

let store =

createstore
state_from_server
)

這段**用於測試資料處理邏輯

import

from
'./actions'
// 列印初始狀態
console.
log(store.
getstate()
)// 每次 state 更新時，列印日誌
// 注意 subscribe() 返回乙個函式用來登出***
const unsubscribe = store.
subscribe((
)=> console.
log(store.
getstate()
))// 發起一系列 action
store.
dispatch
(addtodo
('learn about actions'))
store.
dispatch
(addtodo
('learn about reducers'))
store.
dispatch
(addtodo
('learn about store'))
store.
dispatch
(toggletodo(0
))store.
dispatch
(toggletodo(1
))store.
dispatch
(setvisibilityfilter
(visibilityfilters.
show_completed))
// 停止監聽 state 更新
unsubscribe
()

redux 應用中資料的生命週期（4個步驟）

}

// 當前應用的 state（todos 列表和選中的過濾器）

let previousstate =]}
// 將要執行的 action（新增乙個 todo）
let action =
// reducer 返回處理後的應用狀態
let nextstate =
(previousstate, action)

function

todos
(state =
, action)
function
visibletodofilter
(state =
'show_all'
, action)
combinereducers
()

let nexttodos =

todos
(state.todos, action)
let nextvisibletodofilter =
visibletodofilter
(state.visibletodofilter, action)

return

redux 核心概念

強制使用action來改變state,這樣可以清晰的知道應用當中發生什麼 因為什麼而改變。function demoaction store.dispatch demoaction action就是乙個普通的js物件 reducer的作用相當於是action與state的聯結器 function d...

redux入門基礎

1.redux 適用場景 多互動，多資料來源。2.從元件角度看，如果你的應用有以下場景，可以考慮redux 某個組建的狀態需要共享 某個狀態需要在任何地方都可以拿到 乙個元件需要改變全域性狀態 乙個元件需要改變另乙個元件的狀態 3.設計思想 web應用是乙個狀態機，檢視與狀態一一對應 所有物件都儲存...

redux基礎整理

設計和使用原則 基本概念 1.store store 就是儲存資料的地方，相當於乙個容器，整個專案只能有乙個 store。redux 提供createstore這個函式，用來生成 store。import from redux const store createstore fn createsto...