docs__myblog__frame__react_redux初探.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[60],{"9+a4":function(e,a,t){"use strict";t.r(a);var n=t("q1tI"),l=t.n(n),r=t("dEAq"),c=l.a.memo((e=>{e.demos;return l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h1",{id:"redux-\u521d\u63a2"},l.a.createElement(r["AnchorLink"],{to:"#redux-\u521d\u63a2","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Redux \u521d\u63a2"),l.a.createElement("h2",{id:"\u4ec0\u4e48\u662f-redux"},l.a.createElement(r["AnchorLink"],{to:"#\u4ec0\u4e48\u662f-redux","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4ec0\u4e48\u662f Redux?"),l.a.createElement("p",null,"\u56e0\u4e3a react \u91cc\u9762 props \u662f\u4e00\u7ea7\u4e00\u7ea7\u4f20\u7684\uff0cstate \u662f\u7ec4\u4ef6\u5185\u90e8\u72b6\u6001\u7ba1\u7406\uff0c\u800c\u4e14 react \u662f\u5355\u5411\u6570\u636e\u6d41\uff0c\u5982\u679c\u51fa\u73b0\u4e00\u4e2a\u6570\u636e\u72b6\u6001\u975e\u5e38\u590d\u6742\u5c31\u5f88\u96be\u8ba9\u4e24\u4e2a\u7ec4\u4ef6\u5171\u4eab\u6570\u636e\uff0c\u8fd9\u65f6\u5019\u5c31\u9700\u8981\u4e00\u4e2a\u6240\u6709\u7684 state \u6570\u636e\u96c6\u4e2d\u5728\u7ec4\u4ef6\u7684\u9876\u90e8\u7136\u540e\u5206\u53d1\u7ed9\u5176\u4ed6\u7ec4\u4ef6\uff0c\u8fd9\u5c31\u662f\u96c6\u4e2d\u72b6\u6001\u7ba1\u7406 redux\u3002redux \u5c31\u662f\u4e00\u4e2a js \u72b6\u6001\u5bb9\u5668\uff0c\u63d0\u4f9b\u53ef\u9884\u6d4b\u5316\u7684\u72b6\u6001\u7ba1\u7406\u3002"),l.a.createElement("p",null,"\u6539\u53d8 state \u7684\u552f\u4e00\u65b9\u6cd5\u5c31\u662f store.dispath \u89e6\u53d1\u4e00\u4e2a action,\u7136\u540e\u6839\u636e action \u6267\u884c reducer \u5b8c\u6210 state \u66f4\u65b0\uff0c\u5176\u4ed6\u7ec4\u4ef6\u53ef\u4ee5\u8ba2\u9605 store \u4e2d\u7684\u72b6\u6001 state \u6765\u5237\u65b0\u81ea\u5df1\u7684\u89c6\u56fe"),l.a.createElement("p",null,l.a.createElement("strong",null,"\u8981\u70b9\uff1a")),l.a.createElement("p",null,"\u5e94\u7528\u4e2d\u7684\u6240\u6709 state \u90fd\u662f\u4e00\u4e2a\u5bf9\u8c61\u6811\u7684\u5f62\u5f0f\u5b58\u50a8\u5728\u4e00\u4e2a\u5355\u4e00\u7684 store \u4e2d\uff0c\u552f\u4e00\u6539\u53d8 state \u7684\u65b9\u5f0f\u5c31\u662f\u6d3e\u53d1 action"),l.a.createElement("p",null,"action:\u4e00\u4e2a\u63cf\u8ff0\u53d1\u751f\u4e86\u4ec0\u4e48\u7684\u5bf9\u8c61\uff0c\u52a8\u4f5c\uff0c\u884c\u4e3a"),l.a.createElement("p",null,"reducer: \u4e3a\u4e86\u63cf\u8ff0 action \u5982\u4f55\u6539\u53d8 state \u6811"),l.a.createElement("h2",{id:"redux-\u7684\u597d\u5904"},l.a.createElement(r["AnchorLink"],{to:"#redux-\u7684\u597d\u5904","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Redux \u7684\u597d\u5904\uff1f"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u89e3\u51b3\u591a\u7ea7\u4f20\u9012\u6570\u636e"),l.a.createElement("li",null,"\u89e3\u51b3\u5144\u5f1f\u7ec4\u4ef6\u6570\u636e\u4f20\u9012"),l.a.createElement("li",null,"\u53ef\u4ee5\u5c06\u6570\u636e\u8fde\u63a5\u5230\u4efb\u4f55\u7ec4\u4ef6")),l.a.createElement("h2",{id:"redux-\u7684\u4f7f\u7528\u573a\u666f"},l.a.createElement(r["AnchorLink"],{to:"#redux-\u7684\u4f7f\u7528\u573a\u666f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Redux \u7684\u4f7f\u7528\u573a\u666f"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u516c\u5171\u7ec4\u4ef6\uff0c\u4e1a\u52a1\u7ec4\u4ef6\u975e\u5e38\u591a\uff0c\u7528\u6237\u4f7f\u7528\u65b9\u5f0f\u6bd4\u8f83\u590d\u6742\uff0c\u9879\u76ee\u5e9e\u5927"),l.a.createElement("li",null,"\u4e0d\u540c\u7528\u6237\u6821\u8272\u6743\u9650\u7ba1\u7406"),l.a.createElement("li",null,"\u9700\u8981\u4e0e\u670d\u52a1\u5668\u5927\u91cf\u7684\u4ea4\u4e92\uff0c\u804a\u5929\uff0c\u76f4\u64ad\u7b49"),l.a.createElement("li",null,"view \u9700\u8981\u4ece\u591a\u4e2a\u6765\u6e90\u83b7\u53d6\u6570\u636e"),l.a.createElement("li",null,"react \u89e3\u51b3\u4e0d\u4e86\u7684\uff0c\u591a\u4ea4\u4e92\uff0c\u591a\u6570\u636e\u6e90 :::warning \u6ce8\u610f \u4e0d\u8981\u76f2\u76ee\u5f15\u5165 redux,\u5426\u5219\u53ea\u4f1a\u589e\u52a0\u590d\u6742\u5ea6 :::")),l.a.createElement("h2",{id:"redux-\u662f\u5982\u4f55\u5de5\u4f5c\u7684"},l.a.createElement(r["AnchorLink"],{to:"#redux-\u662f\u5982\u4f55\u5de5\u4f5c\u7684","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Redux \u662f\u5982\u4f55\u5de5\u4f5c\u7684\uff1f"),l.a.createElement("p",null,"action:\uff0c\u63cf\u8ff0\u53d1\u751f\u4e86\u4ec0\u4e48\u7684\u4e00\u4e2a\u5bf9\u8c61\uff0c\u52a8\u4f5c\uff0c\u6307\u4ee4"),l.a.createElement("p",null,"reducer:\u6570\u636e\u63a7\u5236\u5668\uff0c\u6570\u636e\u7684\u4fee\u6539\u8005\u3002action.type,\u5177\u4f53\u505a\u4ec0\u4e48\uff0c\u8fd4\u56de\u4e00\u4e2a newState"),l.a.createElement("p",null,"store\uff1a\u516c\u5171\u6570\u636e\u6e90"),l.a.createElement("p",null,l.a.createElement("strong",null,"\u4f7f\u7528\u8fc7\u7a0b"),"\u521b\u5efa store,\u521b\u5efa action,\u521b\u5efa reducer"),l.a.createElement("h2",{id:"redux-\u7684\u4e09\u5927\u539f\u5219"},l.a.createElement(r["AnchorLink"],{to:"#redux-\u7684\u4e09\u5927\u539f\u5219","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Redux \u7684\u4e09\u5927\u539f\u5219"),l.a.createElement("ol",null,l.a.createElement("li",null,"\u5355\u4e00\u6570\u636e\u6e90"),l.a.createElement("li",null,"state \u53ea\u8bfb\uff0c\u53ea\u80fd\u901a\u8fc7\u51fa\u53d1 action \u6539\u53d8 state,\u53ea\u80fd\u8868\u8fbe\u60f3\u8981\u4fee\u6539\u7684\u610f\u56fe\uff0c\u4fee\u6539\u7684\u52a8\u4f5c\u5728 reducer \u91cc\u9762\u6267\u884c"),l.a.createElement("li",null,"reducre \u4f7f\u7528\u7eaf\u51fd\u6570\u8fdb\u884c\u4fee\u6539\uff0c\u4e3a\u4e86\u63cf\u8ff0 action \u5982\u4f55\u6539\u53d8 state")),l.a.createElement("h2",{id:"redux-\u89e3\u6790"},l.a.createElement(r["AnchorLink"],{to:"#redux-\u89e3\u6790","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"redux \u89e3\u6790"),l.a.createElement("ul",null,l.a.createElement("li",null,"store -> container"),l.a.createElement("li",null,"currentState -> value"),l.a.createElement("li",null,"action -> f \u53d8\u5f62\u5173\u7cfb"),l.a.createElement("li",null,"reducer -> map"),l.a.createElement("li",null,"middleware -> IO functor(\u89e3\u51b3\u5f02\u6b65\u548c\u810f\u64cd\u4f5c)"))))}));a["default"]=e=>{var a=l.a.useContext(r["context"]),t=a.demos;return l.a.useEffect((()=>{var a;null!==e&&void 0!==e&&null!==(a=e.location)&&void 0!==a&&a.hash&&r["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),l.a.createElement(c,{demos:t})}}}]);