React Reduxã®ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«(Todoアプリ)ã‚’React Redux Hooksã§æ›¸ãæ›ãˆã¦ã¿ãŸ | Enjoy IT Life
src/components/AddTodo.tsx import React, { useState } from "react"; import { connect } from "react-redux"; import { addTodo } from "../redux/actions"; import { TodoActions } from "../redux/actions"; type AddTodoProps = { addTodo: (input: string) => TodoActions; }; const AddTodo: React.FC<AddTodoProps> = ({ addTodo }) => { const [input, setInput] = useState(""); const updateInput = (input: string)
useSelectorã¨useDispatchã§container componentを排除ã™ã‚‹ - stmn tech blog
ã¯ã˜ã‚ã« ã“ã‚“ã«ã¡ã¯ã€‚æ ªå¼ä¼šç¤¾ã‚¹ã‚¿ãƒ¡ãƒ³ã§ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã‚’ã—ã¦ãŠã‚Šã¾ã™@0906kokiã§ã™ã€‚ React HooksãŒ2019å¹´ã«ãƒªãƒªãƒ¼ã‚¹ã•ã‚Œã¦ã‹ã‚‰ã€Reduxã®å®Ÿè£…ã§ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆãŒstoreã¨æŽ¥ç¶šã™ã‚‹æ–¹æ³•ã«é¸æŠžè‚¢ãŒå¢—ãˆã¾ã—ãŸã€‚ 具体的ã«è¨€ã†ã¨ã€ä»Šã¾ã§connect関数ã§storeã«ã‚ã‚‹stateã‚„actionã‚’presentational componentã«å¯¾ã—ã¦propsã¨ã—ã¦æ¸¡ã—ã¦ã„ã¾ã—ãŸãŒã€hooks時代ã§ã¯useSelectorã¨useDispatchã«ã‚ˆã£ã¦connect関数を書ã‹ãªãã¦ã‚‚ã€storeã¨ã®æŽ¥ç¶šãŒå¯èƒ½ã«ãªã‚Šã¾ã—ãŸã€‚ 実装ã®åºƒãŒã‚ŠãŒå‡ºãŸã¨åŒæ™‚ã«ã€connect関数ã¨useSelector + useDispatchã®ã©ã¡ã‚‰ã‚’使ãˆã°ã„ã„ã®ã‹ã€ã„ã–実装ã—よã†ã¨æ€ã£ãŸéš›ã«æ‚©ã‚€ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。 ç¾åœ¨ã€å¼Šç¤¾ã§ã¯å¾Œè€…ã®useSelectorã¨useDispatch
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}