react redux 大體架構的搭建

建立目錄

書寫倉庫

//store/index.js

import
from
'redux'
;import reducer from
"./reducer"
const store =
createstore
(reducer)
;export
default store

書寫action

//store/actioncreators.js

import store from
"../store"
import
from
"./actiontype"
//引入常量 //下一步建立
export
default
//需要將action派發給reducer進行處理
store.
dispatch
(action)},
。。。。。。
}

書寫判斷使用到的 常量

//store/actiontype.js

const
add_new_todo
="add_new_todo"
const
change_new_todo
="change_new_todo"
const
delete_new_todo
="delete_new_todo"
export

書寫管理資料的函式 reducer

//store/reducer.js

import
from
"./actiontype"
let state =
,...
...]
}//需要定義成乙個純函式
const
reducer
=(prevstate = state,action)
=>
switch
(action.type)
)break
;...
...default
:break;}
return newstate
}const handler =)[
0].id +1}
,...
...}
export
default reducer

將store 的資料傳遞給元件

import store from

'./store'
//引入 store
import
from
'react-redux'
//引入 react-redux

reactdom.

render
(>
//傳遞 store
>
<
/provider>
, document.
getelementbyid
('root'))
;

獲取資料 及 actioncreators 裡的 action(第4步) 方法

import actioncreators from

"../../store/todolist/actioncreators"
//引入 
import
from
'react-redux'
//引入 connect()

const

mapstatetoprops
= state =>()
const mapdispatchtoprops = actioncreators;
//actioncreators 建立 action 事件的那個js檔案
export
default
connect
(mapstatetoprops,mapdispatchtoprops)
(todocontent)
//todocontent子元件名稱

同乙個元件中使用 得到的資料和方法

render()

item=
/>})
}<
/ul>
)}

const

deletetodo=(
)=>

集合答題大體的

list分為arraylist 順序儲存 可以重複 執行緒不安全 陣列方法儲存 linkedlsit 雙向鍊錶方式儲存 可以重複 執行緒不安全的 vator 順序儲存 可以重複 但是執行緒不安全的 set 分為 hashset 無順序 不可以重複 使用的是hashmap的方式進行儲存的 treese...

react redux使用的方法

1.mapdispatchtoprops中使用bindactioncreators 2.import thunk from redux thunk 使用redux thunk中介軟體，我們可以在action構造器中返回乙個函式，而不是乙個物件。3.通常情況下，我們的專案可能會有龐大的資料，所以一般情...

九 react redux的使用

ui元件 容器元件 import from react redux import countui from components count import from redux count action function mapstatetoprops state function mapdispa...