{"id":280,"date":"2024-12-23T17:41:41","date_gmt":"2024-12-23T09:41:41","guid":{"rendered":"https:\/\/www.vincedeck.top\/?p=280"},"modified":"2024-12-23T17:41:41","modified_gmt":"2024-12-23T09:41:41","slug":"redux-toolkit-%e6%9e%81%e7%ae%80%e6%a1%88%e4%be%8b4","status":"publish","type":"post","link":"https:\/\/www.vincedeck.top\/?p=280","title":{"rendered":"Redux Toolkit \u6781\u7b80\u6848\u4f8b#4"},"content":{"rendered":"\n<p>Redux Toolkit \u6781\u7b80\u793a\u4f8b\uff1aLet&#8217;s buy some ice-cream! \uff08Part 4\uff09<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. <strong>\u4e0d\u53ef\u4ee5\u900f\u652f\uff01\u4e3a\u6570\u636e\u6dfb\u52a0\u9a8c\u8bc1<\/strong><\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong> 4.1 \u4e3a\u201c-\u201d\u6309\u94ae\u6dfb\u52a0\u6570\u636e\u9a8c\u8bc1<\/strong><\/h3>\n\n\n\n<p>Reducer \u51fd\u6570\u652f\u6301\u66f4\u52a0\u590d\u6742\u7684\u66f4\u65b0\u903b\u8f91\u3002\u5f53\u524d\uff0c\u201c-\u201d\u6309\u94ae\u5141\u8bb8\u5c06\u94b1\u7684\u91d1\u989d\u51cf\u81f3\u8d1f\u6570\u3002\u4e3a\u4e86\u907f\u514d\u8fd9\u4e00\u60c5\u51b5\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u5176\u5bf9\u5e94\u7684 reducer \u51fd\u6570\u4e2d\u6dfb\u52a0\u6570\u636e\u9a8c\u8bc1\uff1a<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ src\/store\/reducers\/money.js\n\nexport const moneySlice = createSlice({\n    \/\/ ...\n    reducers: {\n        \/\/ ...\n        decrement: (state) =&gt; {\n            \/\/ \u4e3a\u4e86\u9632\u6b62\u7528\u6237\u51cf\u5c11\u94b1\u65f6\u6ca1\u6709\u8db3\u591f\u7684\u94b1\uff0c\u5728\u8fd9\u91cc\u6dfb\u52a0\u4e00\u4e2a\u5224\u65ad\u6761\u4ef6\n            if (state.value &lt; 5) {\n                alert(&quot;\u6ca1\u6709\u8db3\u591f\u7684\u94b1\uff0c\u6bcf\u6b21\u51cf\u5c115\u5200!&quot;);\n                return;\n            }\n            state.value -= 5;\n        },\n        \/\/ ...\n    },\n})\n\n\/\/ ...<\/code><\/pre><\/div>\n\n\n\n<p>\u6b64\u65f6\u518d\u70b9\u51fb\u201c-\u201d\u6309\u94ae\uff0c\u5f53\u91d1\u989d\u4e0d\u8db35\u5200\u65f6\u4f1a\u5f39\u51fa\u4e00\u4e2a alert \u6846\u5e76\u963b\u6b62\u7528\u6237\u7684\u64cd\u4f5c\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4.2 \u4e3a\u8d2d\u4e70\u6309\u94ae\u6dfb\u52a0\u6570\u636e\u9a8c\u8bc1<\/strong><\/h3>\n\n\n\n<p>\u6700\u540e\uff0c\u4e3a\u8d2d\u4e70\u6309\u94ae\u6dfb\u52a0\u6570\u636e\u9a8c\u8bc1\uff0c\u5f53\u91d1\u989d\u4e0d\u8db3 1.5$ \u65f6\uff0c\u963b\u6b62\u7528\u6237\u7684\u8d2d\u4e70\u884c\u4e3a\u3002\u76f4\u63a5\u4fee\u6539 <code>const App<\/code> \u4e2d\u7684 <code>handleBuyIcecream<\/code> \u51fd\u6570\u5373\u53ef\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ src\/App.js\n\n\/\/ ...\n\nconst App = () =&gt; {\n    \/\/ ...\n    const HandleBuyIcecream = () =&gt; {\n        \/\/ \u4e3a\u4e86\u9632\u6b62\u7528\u6237\u8d2d\u4e70\u51b0\u6fc0\u51cc\u65f6\u6ca1\u6709\u8db3\u591f\u7684\u94b1\uff0c\u5728\u8fd9\u91cc\u6dfb\u52a0\u4e00\u4e2a\u5224\u65ad\u6761\u4ef6\n        if (money &lt; 1.5) {\n            alert(&quot;\u6ca1\u6709\u8db3\u591f\u7684\u94b1\uff0c\u51b0\u6fc0\u51cc\u6bcf\u4e2a1.5\u5200!&quot;);\n            return;\n        }\n        dispatch(buyIcecream());\n        dispatch(decrementByAmount(1.5));\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<p>\u5927\u529f\u544a\u6210\uff01\u708e\u708e\u590f\u65e5\uff0c\u5feb\u53bb\u4e70\u4e9b\u51b0\u6fc0\u51cc\u5427\uff01<\/p>\n\n\n\n<p>\u4ee5\u4e0a\u5185\u5bb9\u7684\u5b8c\u6574\u4ee3\u7801\u5728\u672c\u9879\u76ee\u7684 <a href=\"https:\/\/github.com\/peisong13\/redux_toolkit_example\/tree\/ChapterFour\">ChapterFour \u5206\u652f<\/a>\u3002<\/p>\n\n\n\n \n","protected":false},"excerpt":{"rendered":"<p>Redux Toolkit \u6781\u7b80\u793a\u4f8b\uff1aLet&#8217;s buy some ice-cream! \uff08Par &hellip; <a href=\"https:\/\/www.vincedeck.top\/?p=280\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">\u201cRedux Toolkit \u6781\u7b80\u6848\u4f8b#4\u201d<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[27,7],"tags":[28,29,30,32],"class_list":["post-280","post","type-post","status-publish","format-standard","hentry","category-react","category-7","tag-react","tag-redux","tag-redux-toolkit","tag-redux-toolkit-"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.vincedeck.top\/index.php?rest_route=\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vincedeck.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vincedeck.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vincedeck.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vincedeck.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=280"}],"version-history":[{"count":1,"href":"https:\/\/www.vincedeck.top\/index.php?rest_route=\/wp\/v2\/posts\/280\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/www.vincedeck.top\/index.php?rest_route=\/wp\/v2\/posts\/280\/revisions\/281"}],"wp:attachment":[{"href":"https:\/\/www.vincedeck.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vincedeck.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vincedeck.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}