DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Origami
Origami

Posted on

React tutorial code in Stateless Functional Components and Redux

TL;DR

Reduxใฐใฃใ‹ไฝฟใฃใฆใ‚‹ใจ่„ณใŒใธใ‚“ใซใชใ‚‹ใž

ใฏใ„

ใ“ใ‚“ใซใกใฏใ€‚ใ‚‚ใ†ใŠใ‚Œใฏใคใ‹ใ‚ŒใŸใ€‚ใใ—ใฆใ“ใ‚Œใ‚’่ฆ‹ใฆใใ ใ•ใ„ใ€‚

https://stackblitz.com/edit/react-tutorial-sfc-and-redux
(github repository is here)

ๅŸ‹ใ‚่พผใฟใฎใ‚„ใ‚Šๆ–นใ‚ใ‹ใ‚Šใพใ›ใ‚“ใ€‚ใ‚‚ใ†็œ ใ„ใฎใงใฉใ†ใงใ‚‚ใ„ใ„ใงใ™ใ€‚

tic-tac-toe

ๅ†…ๅฎน็š„ใซใฏReactใฎใ“ใฎใƒšใƒผใ‚ธใงๆ›ธใใƒžใƒซใƒใƒ„ใ‚ฒใƒผใƒ (tic-tac-toe)ใ‚’Stateless Functional Components + Redux(react-redux, redux-actions, reselect, redux-undo@beta)ใงๅ…จ้ƒจๆ›ธใ็›ดใ—ใŸใจใ„ใ†ใ ใ‘ใฎใ“ใจใชใ‚“ใงใ™ใŒใพใ‚ใจใ‚Šใ‚ใˆใš่ฆ‹ใฆใใ ใ•ใ„ใ€‚ใ‚ณใƒผใƒ‰ใŒใ‚ใ‚Šใจๆฑšใ„่‡ชไฟกใฏใ‚ใ‚Šใพใ™ใ€‚

Conclusion

Reduxใฏๅฐ่ฆๆจกใชใƒ—ใƒญใ‚ฐใƒฉใƒ ใงๆ›ธใ„ใฆใ‚‚ใŸใ ็…ฉ้›‘ใชใ ใ‘

ใ‚‚ใ†่ฆ‹ๅ‡บใ—ใฎใจใŠใ‚Šใงใ™ใ€‚
ใŸใ ใ€ๅญฆ็ฟ’ใจใ„ใ†ๆ„ๅ‘ณๅˆใ„ใงใฏใใ‚Œใปใฉ็„ก้ง„ใงใฏใชใ„ใ‹ใชใ€ใจใฏๆ€ใ„ใพใ™ใŒใ€‚

ใใ‚‚ใใ‚‚Reduxใ‚’ไฝฟใ†ๆ„ๅ‘ณ

ใ“ใ‚Œใฏ่‹ฅๅนฒใƒใ‚จใƒ ่ฆ็ด ใ‚’ๅซใฟใพใ™๏ผˆๅฎŒๅ…จใซๅ€‹ไบบใฎ่ฆ‹่งฃใงใ™๏ผ‰ใŒใ€Reduxใฏใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใฎๆง‹้€ ใ‚’ๅฐ‘ใ—่ค‡้›‘ใซใ™ใ‚‹ๅˆ†ใ€ใใ‚Œใžใ‚Œใฎใ‚ขใ‚ฏใ‚ทใƒงใƒณใฎ่ฒฌไปปใ‚’ๅฐใ•ใๅˆ†ๅ‰ฒใ™ใ‚‹ใ‚ˆใ†ใชๅˆถ็ด„ใ‚’่ฆๆฑ‚ใ—ใฆใใ‚‹ใŸใ‚ใ€ใ‚ใ‚‹็จ‹ๅบฆใฎ่ฆๆจกใ‚’ๆŒใกใ€ใ‹ใค่ค‡ๆ•ฐไบบใŒ้–ขใ‚ใ‚‹ใ‚ˆใ†ใชใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใงใใฎๅŠนๆžœใ‚’ๅญ˜ๅˆ†ใซ็™บๆฎใ—ใฆใใ‚Œใ‚‹ใ‚‚ใฎใจ่ช่ญ˜ใ—ใฆใ„ใพใ™ใ€‚

ใ€Œ่ฆๆจกใ€ใจใ„ใ†ใฎใŒ่‚่ฆใงใ€ใฉใ‚Œใปใฉๅคงใใใชใ‚ŒใฐReduxใŒๅจๅŠ›ใ‚’็™บๆฎใ™ใ‚‹ใฎใ‹๏ผŸ
ใใ‚Œใฏใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณ็š„ใชๆ›–ๆ˜งใชๅขƒ็•Œ็ทšใ‚’ๆŒŸใ‚€ๅ•้กŒใชใฎใงใ€ใ“ใ“ใง่ชฌๆ˜Žใฏใ—ใพใ›ใ‚“ใŒใ€ใ“ใฎใใ‚‰ใ„ๅฐ่ฆๆจกใ ใจReduxใฏใ‚€ใ—ใ‚ใ‚ณใƒผใƒ‰ใฎๅˆ†้‡ใ‚’ใ„ใŸใšใ‚‰ใซๅข—ใ‚„ใ—ใ€็…ฉ้›‘ใซใ—ใฆใ—ใพใ†ใ ใ‘ใงใ‚ใ‚‹ไปฅไธŠใ€ใ‚„ใฏใ‚Šใ€ŒReduxใ‚’ไฝฟใ‚ใชใ„ใ€ใจใ„ใ†้ธๆŠž่‚ขใฏๅๅˆ†ใซๆœ‰ใ‚Šๅพ—ใ‚‹ใ€ใจใ„ใ†ใ€ๅฝ“ใŸใ‚Šๅ‰ใฎใ‚ˆใ†ใช็„กๆ„ๅ‘ณใช่งฃ็ญ”ใ‚’ใฟใชใ•ใ‚“ใซๆไพ›ใ—ใพใ™ใ€‚

Top comments (0)

Find what you were looking for? Sign up so you can:

ย 
๐ŸŒš Enable dark mode
๐Ÿ”  Change your default font
๐Ÿ“š Adjust your experience level to see more relevant content