{"id":5900,"date":"2018-06-25T19:54:23","date_gmt":"2018-06-25T10:54:23","guid":{"rendered":"https:\/\/www.vincentina.net\/?p=5900"},"modified":"2021-12-22T20:22:28","modified_gmt":"2021-12-22T11:22:28","slug":"%e8%b6%85%e3%82%b7%e3%83%b3%e3%83%97%e3%83%ab%e3%81%abreact-redux%e3%82%92%e3%81%be%e3%81%aa%e3%81%b6","status":"publish","type":"post","link":"https:\/\/www.vincentina.net\/?p=5900","title":{"rendered":"\u8d85\u30b7\u30f3\u30d7\u30eb\u306bReact-Redux\u3092\u307e\u306a\u3076"},"content":{"rendered":"<p>\u524d\u56de<a href=\"https:\/\/www.vincentina.net\/?p=5890\">\u8d85\u30b7\u30f3\u30d7\u30eb\u306bRedux\u3092\u307e\u306a\u3076<\/a>\u306e\u7d9a\u304d\u3002<br \/>\n\u3067\u304d\u308b\u304b\u304e\u308a\u7c21\u5358\u306b\u306a\u308b\u3088\u3046\u306bRedux\u3068React-Redux\u3092\u5225\u3005\u306b\u899a\u3048\u3088\u3046\u3068\u3044\u3046\u3082\u306e\u3067<br \/>\n\u4eca\u56de\u306fReact-Redux\u3067\u3059\u3002<\/p>\n<p>\u6e96\u5099\u306f<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\n$ npm i react-redux\r\n<\/pre>\n<h3>Container Comopnent \u3068 Presentational Component<\/h3>\n<h4>Container Component<\/h4>\n<ul>\n<li>React\u3068Redux\u306e\u6a4b\u6e21\u3057\u3002Redux\u306eStore\u3084Action\u3092\u53d7\u3051\u53d6\u3063\u3066React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306eProps\u3068\u3057\u3066\u6e21\u3059\u3002<\/li>\n<\/ul>\n<h4>Presentational Component<\/h4>\n<ul>\n<li>Redux\u4f9d\u5b58\u306e\u306a\u3044\u7d14\u7c8b\u306aReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3002<\/li>\n<\/ul>\n<h3>\u524d\u56de\u4f5c\u3063\u305f\u30a2\u30d7\u30ea\u306bReact-Redux\u3092\u5c0e\u5165\u3057\u3066\u307f\u308b\u3002<\/h3>\n<p>\u524d\u56de\u3064\u304f\u3063\u305fRedux\u306e\u30b5\u30f3\u30d7\u30eb\u306b\u3001\u753b\u9762\u304b\u3089\u64cd\u4f5c\u3067\u304d\u308b\u3088\u3046\u306bReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30921\u3064\u4ed8\u3051\u8db3\u3057\u3066\u30a2\u30d7\u30ea\u306b\u3057\u3066\u3001React-Redux\u3092\u5c0e\u5165\u3057\u3066\u307f\u308b\u3002<br \/>\n\u91cd\u8981\u306a\u3068\u3053\u306f <b>Provider<\/b> <b>Connect<\/b> \u306e2\u3064\u3002<\/p>\n<p>\u3053\u3053\u3067\u3061\u3087\u3063\u3068\u5fa9\u7fd2\u3067\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u8d77\u3053\u3059Dispatch\u306fStore\u306e\u30e1\u30bd\u30c3\u30c9\u3067\u3057\u305f\u3002<br \/>\n\u306a\u306e\u3067\u3001\u3051\u3063\u3053\u3046\u6df1\u3044\u3068\u3053\u306bDispatch\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u3042\u3063\u305f\u3068\u3059\u308b\u3068\u3001\u305d\u3053\u307e\u3067\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u305f\u3044\u3057\u3066\u30d0\u30b1\u30c4\u30ea\u30ec\u30fc\u3055\u305b\u308b\u5fc5\u8981\u304c\u51fa\u3066\u304f\u308b\u3002<br \/>\n\u305d\u3053\u3067React-Redux\u306eProvider\u3068Connect\u3092\u4f7f\u3046\u3068\u3069\u3046\u306a\u308b\u304b\u3068\u3001\u6700\u4e0a\u4f4d\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092Provider\u3067\u30e9\u30c3\u30d7\u3057\u3066\u3001Connect\u304c\u7279\u5b9a\u306eReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5bfe\u3057\u3066\u3001\u4fdd\u6301\u3057\u3066\u3044\u308bStore\u3092\u63d0\u4f9b\u3059\u308b\u3002\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306bStore\u3092\u4e0e\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u611f\u3058\u3067\u3001\u3053\u306e\u30cb\u30b3\u30a4\u30c1\u3067\u52d5\u4f5c\u3059\u308b\u3063\u307d\u3044\u3067\u3059\u304c\u3001\u3053\u308c\u304c\u306a\u304b\u306a\u304b\u30a4\u30e1\u30fc\u30b8\u63b4\u307f\u306b\u304f\u3044\u3093\u3060\u3088\u3002<br \/>\n\u4e00\u65b9\u901a\u884c\u306a\u3093\u3067\u3059\u3063\u3066\u8a00\u3063\u3061\u3083\u3046\u3068\u3059\u3054\u304f\u7c21\u5358\u306b\u805e\u3053\u3048\u308b\u3093\u3084\u3051\u3069\u3002<br \/>\n\u8a00\u8449\u306e\u8aac\u660e\u306f\u3053\u306e\u8fba\u3067\u3001\u3042\u3068\u306f\u30b3\u30fc\u30c9\u30ea\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u65b9\u304c\u63b4\u3081\u305d\u3046\u306a\u6c17\u304c\u3059\u308b\u306e\u3067\u30b3\u30fc\u30c9\u3067\u3002<br \/>\n\u3067\u304d\u3042\u304c\u308a\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3001\u4eca\u56de\u3082Perl\u30bf\u30b9\u30af\u3092\u5f97\u305f\u3068\u304d\u306b\u30c0\u30fc\u30af\u30b5\u30a4\u30c9\u306b\u306a\u308b\u3068\u3044\u3046\u3082\u306e\u3002<\/p>\n<div class=\"video-margin\">\n<div style=\"width: 436px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-5900-1\" width=\"436\" height=\"540\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.vincentina.net\/wp-content\/uploads\/2018\/06\/pw03.mp4?_=1\" \/><a href=\"https:\/\/www.vincentina.net\/wp-content\/uploads\/2018\/06\/pw03.mp4\">https:\/\/www.vincentina.net\/wp-content\/uploads\/2018\/06\/pw03.mp4<\/a><\/video><\/div>\n<\/div>\n<p>\u524d\u56de\u304b\u3089\u5897\u3048\u305f\u306e\u306fComponent\u3068Container\u306e2\u3064\u3002<br \/>\n\u51fa\u6765\u4e0a\u304c\u3063\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210\u306f\u3053\u3093\u306a\u306e\u3002<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsrc\/\r\n  actions\/\r\n  components\/\r\n  containers\/\r\n  reducers\/\r\nindex.js\r\n<\/pre>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n...\/src\/actions\/tasks.js\r\n\/**\r\n * ActionCreator\r\n * Action\u3092\u751f\u6210\u3059\u308b\u305f\u3081\u306e\u95a2\u6570\u3002\r\n * \r\n * Action\r\n * \u30e6\u30fc\u30b6\u304b\u3089\u306e\u5165\u529b\u3068\u304bAPI\u304b\u3089\u306e\u60c5\u5831\u53d6\u5f97\u3068\u304b\r\n * \u306a\u3093\u3089\u304b\u306e\u72b6\u614b\u5909\u5316\u3092\u5f15\u304d\u8d77\u3053\u3059\u73fe\u8c61\u3092\u6307\u3059\u3002\r\n * \r\n *\/\r\nexport const changeName = (name) =&gt; ({\r\n\ttype: 'CHANGE_NAME',\r\n\tpayload: {\r\n\t\tname\r\n\t}\r\n});\r\n\r\nexport const addTask = (task) =&gt; ({\r\n\ttype: 'ADD_TASK',\r\n\tpayload: {\r\n\t\ttask,\r\n\t}\r\n});\r\n\r\nexport const tDS = () =&gt; ({\r\n\ttype: 'TO_DARKSIDE',\r\n});\r\n\r\nexport const inputTask = (task) =&gt; ({\r\n\ttype: 'INPUT_TASK',\r\n\tpayload: {\r\n\t\ttask\r\n\t}\r\n});\r\n\r\n<\/pre>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n...\/reducers\/tasks.js\r\nconst initialState = {\r\n\ttasks: &#x5B;'Javascript', 'Kotlin'],\r\n\tname: &quot;\u30a2\u30ca\u30ad\u30f3&quot;,\r\n\tdarkside: false,\r\n\ttask: ''\r\n};\r\n\r\n\/**\r\n * Reducer\r\n * Store\u304c\u4fdd\u6301\u3057\u3066\u308b\u72b6\u614b\u3092\u5909\u5316\u3055\u305b\u308b\u95a2\u6570\u3002\r\n * \r\n *\/\r\nexport default function addReducer(state = initialState, action) {\r\n\tswitch (action.type) {\r\n\t\tcase 'INPUT_TASK':\r\n\t\t\treturn {\r\n\t\t\t\t...state,\r\n\t\t\t\ttask: action.payload.task\r\n\t\t\t};\r\n\t\tcase 'CHANGE_NAME':\r\n\t\t\treturn {\r\n\t\t\t\t...state,\r\n\t\t\t\tname: action.payload.name\r\n\t\t\t};\r\n\t\tcase 'ADD_TASK':\r\n\t\t\treturn {\r\n\t\t\t\t...state,\r\n\t\t\t\ttasks: state.tasks.concat(&#x5B;action.payload.task])\r\n\t\t\t};\r\n\t\tcase 'TO_DARKSIDE':\r\n\t\t\treturn {\r\n\t\t\t\t...state,\r\n\t\t\t\tdarkside: true\r\n\t\t\t};\r\n\t\tdefault:\r\n\t\t\treturn state;\r\n\t}\r\n}\r\n\r\n<\/pre>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n...\/containers\/PerlWars.js\r\nimport { connect } from 'react-redux';\r\nimport PerlWars from '..\/components\/PerlWars';\r\nimport { changeName, addTask, tDS, inputTask } from '..\/actions\/tasks';\r\n\r\n\/**\r\n * mapStateToProps Store\u304b\u3089\u5fc5\u8981\u306aState\u3092\u53d6\u308a\u51fa\u3057\u3066Component\u306eProps\u306b\r\n * \u5272\u308a\u5f53\u3066\u308b\u95a2\u6570\u3092\u6307\u5b9a\u3002\r\n *\/\r\nfunction mapStateToProps({ tasks, name, darkside, task }) {\r\n\treturn {\r\n\t\ttasks,\r\n\t\tname,\r\n\t\tdarkside,\r\n\t\ttask,\r\n\t};\r\n}\r\n\r\n\/**\r\n * Dispatch\u306e\u51e6\u7406\u3092\u9589\u3058\u308b\u3053\u3068\u3067Dispatch\u306e\u6982\u5ff5\u3092\u9589\u3058\u8fbc\u3081\u308b\u3002\r\n *\/\r\nfunction mapDispatchProps(dispatch) {\r\n\treturn {\r\n\t\tinputTask(task) {\r\n\t\t\tdispatch(inputTask(task));\r\n\t\t},\r\n\t\taddTask(task) {\r\n\t\t\tif (task !== undefined) {\r\n\t\t\t\tdispatch(addTask(task));\r\n\t\t\t}\r\n\t\t},\r\n\t\ttDS() {\r\n\t\t\tdispatch(tDS());\r\n\t\t},\r\n\t\tchangeName(name) {\r\n\t\t\tdispatch(changeName(name));\r\n\t\t},\r\n\t};\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchProps)(PerlWars);\r\n\r\n<\/pre>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n...\/components\/PerlWars\r\nimport React from 'react';\r\nimport Reboot from 'material-ui\/Reboot';\r\nimport Button from 'material-ui\/Button';\r\nimport TextField from 'material-ui\/TextField';\r\nimport Input from 'material-ui\/Input';\r\n\r\nexport default function PerlWars({ inputTask, addTask, tDS, changeName, tasks, name, darkside, task }) {\r\n\r\n\r\n\tlet give = (n) =&gt; {\r\n\t\tif (n === 'perl' || n === 'Perl' || n === 'PERL') {\r\n\t\t\ttDS();\r\n\t\t\tchangeName('\u30d9\u30a4\u30c0\u30fc\u537f');\r\n\t\t\treturn n;\r\n\t\t} else if (n !== '') {\r\n\t\t\treturn n;\r\n\t\t} else {\r\n\t\t\treturn undefined;\r\n\t\t}\r\n\t}\r\n\r\n\treturn (\r\n\t\t&lt;div style={{ margin: 20 }}&gt;\r\n\t\t\t&lt;Reboot \/&gt;\r\n\t\t\t&lt;div&gt;\r\n\t\t\t\tName: {name} Force: {darkside ? '\u30b7\u30b9' : '\u30b8\u30a7\u30c0\u30a4'}\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;TextField style={{ margin: 5 }} refs=&quot;textbox&quot; onBlur={(e) =&gt; e.target.value = ''} onChange={(e) =&gt; inputTask(e.target.value)} \/&gt;\r\n\t\t\t&lt;Button raised color=&quot;primary&quot; onClick={() =&gt; addTask(give(task))}&gt; \u5927\u3044\u306a\u308b\u529b &lt;\/Button&gt;\r\n\t\t\t&lt;ul&gt;\r\n\t\t\t\t{\r\n\t\t\t\t\ttasks.map(function (item, i) {\r\n\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t&lt;li key={i}&gt;{item}&lt;\/li&gt;\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t})\r\n\t\t\t\t}\r\n\t\t\t&lt;\/ul&gt;\r\n\t\t&lt;\/div &gt;\r\n\t);\r\n}\r\n\r\n<\/pre>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\n...\/index.js\r\n\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport '.\/index.css';\r\nimport addReducer from '.\/reducers\/tasks';\r\nimport { createStore } from 'redux';\r\nimport { Provider } from 'react-redux';\r\nimport PerlWars from '.\/containers\/PerlWars';\r\n\r\n\r\n\/**\r\n * Store\r\n * \u30a2\u30d7\u30ea\u5168\u4f53\u306e\u72b6\u614b\u3068\u30ed\u30b8\u30c3\u30af\u3092Store\u3067\u96c6\u7d04\u7ba1\u7406\u3059\u308b\u3002\r\n *\/\r\nconst store = createStore(addReducer);\r\n\r\nReactDOM.render(\r\n\t&lt;Provider store={store}&gt;\r\n\t\t&lt;PerlWars \/&gt;\r\n\t&lt;\/Provider&gt;,\r\n\tdocument.getElementById('root')\r\n);\r\n\r\n<\/pre>\n<p>\u307c\u3061\u307c\u3061React\u30a2\u30d7\u30ea\u4f5c\u6210\u306e\u57fa\u76e4\u304c\u3067\u304d\u308b\u76ee\u51e6\u304c\u305f\u3063\u3066\u304d\u305f\u306e\u3067\u3001\u6b21\u56de\u306f\u307e\u3068\u3082\u306a\u30a2\u30d7\u30ea\u3092\u3064\u304f\u308b\u305e\u30fc\uff01<\/p>\n<div class='wp_social_bookmarking_light'>        <div class=\"wsbl_twitter\"><a href=\"https:\/\/twitter.com\/share\" class=\"twitter-share-button\" data-url=\"https:\/\/www.vincentina.net\/?p=5900\" data-text=\"\u8d85\u30b7\u30f3\u30d7\u30eb\u306bReact-Redux\u3092\u307e\u306a\u3076\" data-via=\"TakekenTw\" data-lang=\"ja\">Tweet<\/a><\/div><\/div>\n<br class='wp_social_bookmarking_light_clear' \/>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u56de\u8d85\u30b7\u30f3\u30d7\u30eb\u306bRedux\u3092\u307e\u306a\u3076\u306e\u7d9a\u304d\u3002 \u3067\u304d\u308b\u304b\u304e\u308a\u7c21\u5358\u306b\u306a\u308b\u3088\u3046\u306bRedux\u3068React-Redux\u3092\u5225\u3005\u306b\u899a\u3048\u3088\u3046\u3068\u3044\u3046\u3082\u306e\u3067 \u4eca\u56de\u306fReact-Redux\u3067\u3059\u3002 \u6e96\u5099\u306f $ npm i react-redux  &hellip; <a href=\"https:\/\/www.vincentina.net\/?p=5900\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;\u8d85\u30b7\u30f3\u30d7\u30eb\u306bReact-Redux\u3092\u307e\u306a\u3076&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[106],"tags":[],"class_list":["post-5900","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/posts\/5900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5900"}],"version-history":[{"count":1,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/posts\/5900\/revisions"}],"predecessor-version":[{"id":7739,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/posts\/5900\/revisions\/7739"}],"wp:attachment":[{"href":"https:\/\/www.vincentina.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}