\u5b98\u65b9\u9000\u51fa\u7684 reactHooks \u53ef\u4ee5\u5b8c\u7f8e\u7684\u5b9e\u73b0 redux \u7684\u529f\u80fd, \u4f7f\u7528\u65b9\u6cd5\u66f4\u52a0\u4fbf\u6377, \u4eff\u4f5b\u53c8\u770b\u5230\u4e86React\u7684\u672a\u6765<\/p>\n\n\n\n
\u65b0\u5efa Context \/ index.js \u6587\u4ef6\u6a21\u5757\u5316\u6b65\u9aa4\u4e09<\/p>\n\n\n\n
import {createContext} from \"react\"
const Context = createContext(null)
export default Context<\/code><\/pre>\n\n\n\n\u5728APP.js \u4e2d<\/p>\n\n\n\n
import React, { useReducer } from \"react\";
import Context from \".\/Context\/index\"
import Coma from \".\/pages\/Coma\"
import Comb from \".\/pages\/Comb\"
\u200b
const initState = {
user:\"null\",
books:\"\"
}
\u200b
const obj = {
user: (state, action) => {
return { ...state, user: action.user };
},
books:(state, action) => {
return { ...state, books: action.books };
},
}
\u200b
const reducer = (state,action)=>{
let fn = obj[action.type];
if(fn){
return fn(state,action)
}else{
console.error(\"wrong type\");
}
}
\u200b
function App() {
const [state,dispatch] = useReducer(reducer,initState)
\u200b
const handelAddUser = ()=>{
dispatch({type:\"user\",user:\"yoyo\"})
}
const handelAddBooks = ()=>{
dispatch({type:\"books\",books:\"\u4e1c\u65b9\u7504\u9009\"})
}
\u200b
return (
<Context.Provider value={{state,dispatch}}>
<Coma><\/Coma>
<Comb><\/Comb>
<div>
<button onClick={handelAddUser}>\u6dfb\u52a0\u4f5c\u8005<\/button>
<button onClick={handelAddBooks}>\u6dfb\u52a0\u4e66\u7c4d<\/button>
<\/div>
<\/Context.Provider>
);
}
\u200b
export default App;
\u200b<\/code><\/pre>\n\n\n\n\u521b\u5efa pages \/ Coma.js<\/p>\n\n\n\n
\/\/ eslint-disable-next-line
import React, { useContext } from \"react\"
import Context from \"..\/Context\/index\"
function Coma(){
\/\/ eslint-disable-next-line
const {state,dispatch} = useContext(Context)
return (
<div>
<h1>this is Coma <\/h1>
<div>name: {state.user}<\/div>
<hr \/>
<\/div>
)
}
export default Coma<\/code><\/pre>\n\n\n\n\u521b\u5efa pages \/ Comb.js<\/p>\n\n\n\n
import React, { useContext } from \"react\"
import Context from \"..\/Context\/index\"
function Comb(){
\/\/ eslint-disable-next-line
const {state,dispatch} = useContext(Context)
\u200b
return (
<div>
<h1>this is Comb <\/h1>
<div>\u4e66\u7c4d\uff1a{state.books}<\/div>
<br \/>
<\/div>
)
}
\u200b
export default Comb<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u5b98\u65b9\u9000\u51fa\u7684 reactHooks \u53ef\u4ee5\u5b8c\u7f8e\u7684\u5b9e\u73b0 redux \u7684\u529f\u80fd, \u4f7f\u7528\u65b9\u6cd5\u66f4\u52a0\u4fbf\u6377, \u4eff\u4f5b\u53c8\u770b\u5230\u4e86Rea […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[],"class_list":["post-436","post","type-post","status-publish","format-standard","hentry","category-redux"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/436","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=436"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/436\/revisions"}],"predecessor-version":[{"id":437,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/436\/revisions\/437"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}