Category Archives: react

Redux Thunk และ Redux Saga คืออะไร

Redux Thunk และ Redux Saga ทั้งคู่เป็น Middleware ให้กับ Redux มาช่วยจัดการ action ที่จะต้องการ return function เช่นต้องการ axios api ข้างนอกเพื่อมาทำ logic บางอย่างก่อน โดยทั่วไปก็จะต้องพบเจอและได้ใช้งาน โดยปกติ action ต้องการ return pure action แต่ในงานจริงเราต้องใช้ Middleware มาช่วยจัดการ Redux Thunk จะเหมาะกับโปรเจ็คขนาดเล็ก ทำคนเดียว เทสยากเพราะ return promise Redux Saga จะเหมาะกับโปรเจ็คขนาดใหญ่ … Continue reading

Posted in react, redux | Leave a comment

Higher-Order Components & Render Props

ทั้งหมดทำหน้าที่แก้ปัญหา cross cutting concern แยกส่วนโค้ดที่ซับซ้อนไปอยู่ในที่เดียว 1.ยุบแยกไปทำ new components 2.HOC(Higher Order Component) – logic ซ้ำๆกัน ย้ายไปทำในนี้ โยน Component เข้าไป ได้ Component เดิม เพิ่มเติมคือมี logic พิเศษเพิ่มขึ้นมา เช่น Redux ก็จะได้ความสามารถเข้าถึง store 3.renderProps – พวก Form ที่ใช้ซ้ำๆกัน

Posted in nextjs, react | Leave a comment

npm run build fails to minify

ขณะรันเทสไม่มีปัญหา แต่พอเราจะสั่ง build กลับพบ error Failed to minify the code from this file:     ./node_modules/base64url/dist/base64url.js:4 ผู้พัฒนาได้กำลังแก้ไขปัญหานี้ ให้เราอัพเกรด react-script จาก 1.x เป็น "react-scripts": "2.0.0-next.3e165448" ขณะที่ลงบทความนี้ 2.0 นั้นยังไม่ Stable อ้างอิงจากผู้พัฒนา https://github.com/facebook/create-react-app/issues/3815

Posted in nodejs, react | Leave a comment

react with redux ฉบับมือใหม่ ทำความเข้าใจโดยสรุปอย่างง่ายที่สุด

React จะมีปัญหาในการจัดการ State ของ component ที่อยู่โดดๆ แต่ต้องการเข้าถึง State เดียวกัน ซึ่งสามารถแก้ปัญหาได้โดยการใช้ Redux เข้ามาช่วย Redux เป็น concept มาช่วยเก็บ State ทั้งหมดไว้ที่เดียวแบบ global ซึ่งใน react นั้นจะมี library ให้ใช้คือ react-redux “Redux holds up the state within a single location. Also with Redux the logic for … Continue reading

Posted in react, redux | Leave a comment

react webpack allow external ip

add host: ’0.0.0.0′ at webpack.config.js devServer: {     inline: true,     contentBase: ‘./app’,     port: 9000,     host: ’0.0.0.0′   }

Posted in react | Leave a comment