React Redux入門教程

在沒有react-redux之前我們想要操作store：

這種每個元件都要顯式定義context或者是顯式傳遞store對於我們的**來說算是一種小的災難性（當然並不會影響太多），會導致我們寫很多重複**，也有些不易於維護邏輯。

react-redux就幫助我們解決了這個問題。使我們可以將邏輯和ui分離，易於維護。但同時也產生了一些問題，我的個人看法，這裡就不做闡述了。

個人推薦的使用react-redux的寫法是將容器元件（也就是ui元件的邏輯部分）和ui元件分檔案來管理。但由於個人比較懶，就都放到了ui層來寫了。（手動滑稽…）

這篇文章的demo可以和我上篇redux的demo來進行對比，就能看到react-redux的優勢和缺點了。有得必有失，世間之事皆如此。

import react from
'react'
;import reactdom from
'react-dom'
;import
from
'react-redux'
;import store from
"./chapter9-react-redux/store";;
reactdom.
render
(>
>
<
/provider>
,    document.
getelementbyid
('root'
))

import react from
'react'
;import itemlist from
"./itemlist"
;import additemform from
"./additemform"
;const
=(props)
=>
export

import react from
'react'
;import
from
"./actions"
;import
from
'react-redux'
;const
additemform
=(props)
=>
= props;
let title;
const
submit
= e =>
return
(>
"text"
ref=
/>
add<
/button>
<
/form>)}
function
mapdispatchtoprops
(dispatch)
}export
default
connect
(null
, mapdispatchtoprops)
(additemform)
;

import react from
'react'
;import
from
'react-redux'
;import item from
"./item"
;const
itemlist
=(props)
=>
= props;
console.
log(items)
return
(/>)}
<
/ul>)}
function
mapstatetoprops
(state)
}export
default
connect
(mapstatetoprops,
null
)(itemlist)
;

import react from
'react'
;import
from
"./actions"
;import
from
"react-redux"
;const
item
=(props)
=>
= props;
return
(>
x<
/button>
<
/li>)}
function
mapdispatchtoprops
(dispatch)
}export
default
connect
(null
, mapdispatchtoprops)
(item)
;

import
from
"uuid"
;import constants from
"../constants"
;export
const
additem
= title =>()
export
const
removeitem
= id =>
()

import constants from
"../constants"
;const
item
=(state =
, action)
=>
default
:return state;}}
export
const
items
=(state =
, action)
=>
, action)
]case constants.
remove_item
:return state.
filter
((item, index)
=>
item.id !== action.id
)default
:return state;
}}

import
from
"redux"
;import
from
"../reducers"
;const store =
createstore
(combinereducers()
);export
default store;

const constants =
export
default constants

CSS入門教程

css是 cascading style sheets 的簡稱，中文翻譯為串接樣式表也有人翻譯為樣式表 css用以作為網頁的排版和風格設計，在web標準建站中，對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足，讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...

CSS入門教程

Linux入門教程

linux下有兩種使用者 1.root使用者，提示符 2.普通使用者，提示符在 etc目錄下有乙個inittab檔案，其中有一行配置 id 3 defualt 其中，數字3就代表一啟動進入字元終端，如果改為5則代表一啟動進入x window 修改口令 passwd 退出登入 exit 關閉機器只...

React Redux入門教程

CSS入門教程

CSS入門教程

Linux入門教程

相關推薦