\u4e0a\u9762\u4ecb\u7ecd Redux \u7684\u65f6\u5019\u88abup\u4e3b\u5f62\u5bb9\u4e3axiang, \u800c react-redux \u5728\u4e00\u5b9a\u7a0b\u5ea6\u4e0a\u7b80\u5316\u4e86 redux \u7684\u64cd\u4f5c, \u4f18\u5316\u4e86\u7528\u6237\u4f53\u9a8c\uff0c\u4f46\u4e0d\u8fc7\u662fxiang\u4e0a\u6dfb\u82b1\uff0c\u672c\u8d28\u8fd8\u662fxiang\uff0c\u540e\u6765\u5b98\u65b9\u5bf9 react-redux \u7684\u529f\u80fd\u53c8\u505a\u4e86\u8fdb\u4e00\u6b65\u7684\u6539\u8fdb\uff0c\u63a8\u51fa\u7684 react Hook \u53ef\u4ee5\u8fdb\u5b8c\u5168\u66ff\u4ee3 react-redux \u7684\u529f\u80fd\uff0c\u8fd8\u662f\u63a8\u8350\u60f3\u7528\u51fd\u6570\u5f00\u53d1\u7684\u5c0f\u4f19\u4f34\u8bf7\u62e5\u62b1vue3<\/p>\n\n\n\n
\u5b89\u88c5<\/p>\n\n\n\n
npm install react-redux redux <\/code><\/pre>\n\n\n\n\u521b\u5efa redux \u6587\u4ef6\u5939\u7528\u4e8e\u5b58\u653e\u72b6\u6001 redux\/reducer\/index \u6a21\u5757\u5316\u8bbe\u7f6e reducer<\/p>\n\n\n\n
const reducer = ((
state = {
text:\"hello world\"
},
action
)=>{
let newState = {...state}
let {type,text} = action
switch (type) {
case \"setText\":
newState.text = text
return newState
default:
return state
}
})
export default reducer<\/code><\/pre>\n\n\n\n\u521b\u5efa redux \/ store.js \u7528\u4e8e\u6574\u5408 reducer<\/p>\n\n\n\n
import {createStore,combineReducers} from \"redux\"
import textReducer from \".\/reducer\/index\"
const reducer = combineReducers({textReducer})
const store = createStore(reducer)
export default store<\/code><\/pre>\n\n\n\n\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528 APP \u7ec4\u4ef6\u5f15\u5165<\/p>\n\n\n\n
import {Provider} from \"react-redux\"
import store from \".\/redux\/store.js\"
import ChildA from \".\/childA\"
import ChildB from \".\/childB\"
const App = ()=>{
return(
<Provider store={store}>
<div>
<ChildA\/>
<ChildB\/>
<\/div>
<\/Provider>
)
}
export default Index<\/code><\/pre>\n\n\n\n\u5728 ChildA \u4e2d\u4fee\u6539 text \u7684\u503c<\/p>\n\n\n\n
imoprt {connect} from \"react-redux\"
const ChildA = (props)=>{
const handelClick = ()=>{
console.log(props)
props.setText()
}
return (
<div>
<h2>this is ChildA<\/h2>
<button onClick={handelClick}>Click<button\/>
<\/div>
)
}
const setText = {
setText\uff08\uff09{
return {
type:\"setText\",
text:\"fuck react\"
}
}
}
export default connect(null,setText)(childA)<\/code><\/pre>\n\n\n\n\u5728 childB \u4e2d\u62ff\u5230 text \u7684\u503c<\/p>\n\n\n\n
import {connect} from \"react-redux\"
const ChildB = (props)=>{
return (
<div>
<h2>this is ChildB<\/h2>
<h3>this is react-redux {props.text}<\/h3>
<\/div>
)
}
export default connect((state)=>{
return {
text:state.textReducer.text
}
})(ChildB)<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e0a\u9762\u4ecb\u7ecd Redux \u7684\u65f6\u5019\u88abup\u4e3b\u5f62\u5bb9\u4e3axiang, \u800c react-redux \u5728\u4e00\u5b9a\u7a0b\u5ea6\u4e0a\u7b80\u5316\u4e86 red […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,50],"tags":[],"class_list":["post-514","post","type-post","status-publish","format-standard","hentry","category-react","category-redux"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=514"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/514\/revisions"}],"predecessor-version":[{"id":515,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/514\/revisions\/515"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}