คำถามติดแท็ก reactjs-flux

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ปิดเมื่อปีที่แล้ว ล็อคแล้ว คำถามและคำตอบนี้ถูกล็อคเนื่องจากคำถามอยู่นอกหัวข้อ แต่มีความสำคัญทางประวัติศาสตร์ ขณะนี้ไม่ยอมรับคำตอบหรือการโต้ตอบใหม่ ฉันได้อ่านคำตอบนี้ , ลดสำเร็จรูปมองที่ GitHub ตัวอย่างไม่กี่และแม้กระทั่งพยายาม Redux นิด ๆ หน่อย ๆ (ปพลิเคชันที่ต้องทำ) ดังที่ฉันเข้าใจแรงจูงใจ doc redux ทางการให้ข้อดีเมื่อเปรียบเทียบกับสถาปัตยกรรม MVC แบบดั้งเดิม แต่มันไม่ได้ให้คำตอบสำหรับคำถาม: ทำไมคุณควรใช้ Redux บน Facebook Flux นั่นเป็นเพียงคำถามของสไตล์การเขียนโปรแกรม: functional vs non-functional หรือไม่? หรือคำถามอยู่ในความสามารถ / เครื่องมือ dev ที่ตามมาจากวิธีการ redux? อาจจะปรับขนาด? หรือทดสอบ? ฉันพูดถูกหรือไม่ถ้าฉันบอกว่า redux เป็นฟลักซ์สำหรับผู้ที่มาจากภาษาที่ใช้งานได้ เพื่อตอบคำถามนี้คุณอาจเปรียบเทียบความซับซ้อนของการใช้คะแนนแรงจูงใจของ redux กับ …

1126 javascript  reactjs  reactjs-flux  flux  redux 

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบข้อเท็จจริงและการอ้างอิงได้โดยแก้ไขโพสต์นี้ ปิดเมื่อปีที่แล้ว ปรับปรุงคำถามนี้ ฉันเพิ่งค้นพบRedux ทุกอย่างดูดี มี downside, gotcha หรือประนีประนอมของการใช้ Redux มากกว่า Flux หรือไม่? ขอบคุณ

243 reactjs  redux  flux  reactjs-flux 

ฉันกำลังสร้างแอปพลิเคชัน react.js ด้วยสถาปัตยกรรมของฟลักซ์และฉันพยายามหาว่าควรจะทำคำขอข้อมูลจากเซิร์ฟเวอร์ที่ไหนและเมื่อใด มีตัวอย่างใด ๆ สำหรับสิ่งนี้หรือไม่ (ไม่ใช่แอพพลิเคชั่นที่ต้องทำ!)

194 javascript  reactjs  reactjs-flux 

ฉันมาจากโลกเชิงมุมที่ฉันสามารถแยกตรรกะไปยังบริการ / โรงงานและกินมันในตัวควบคุมของฉัน ฉันพยายามเข้าใจว่าฉันจะประสบความสำเร็จในแอปพลิเคชัน React ได้อย่างไร สมมติว่าฉันมีองค์ประกอบที่ตรวจสอบการป้อนรหัสผ่านของผู้ใช้ (มันมีความแข็งแรง) มันเป็นตรรกะที่ค่อนข้างซับซ้อนดังนั้นฉันไม่ต้องการเขียนมันในองค์ประกอบที่เป็นของตัวเอง ฉันควรเขียนตรรกะนี้ที่ไหน ในร้านค้าถ้าฉันใช้ฟลักซ์ หรือมีตัวเลือกที่ดีกว่า

176 reactjs  reactjs-flux 

ฉันกำลังอ่านเกี่ยวกับFluxแต่ตัวอย่างแอป Todoนั้นง่ายเกินไปสำหรับฉันที่จะเข้าใจประเด็นสำคัญบางประการ ลองนึกภาพแอปหน้าเดียวเช่น Facebook ที่มีหน้าโปรไฟล์ของผู้ใช้ ในหน้าโปรไฟล์ผู้ใช้แต่ละหน้าเราต้องการแสดงข้อมูลผู้ใช้บางส่วนและโพสต์ล่าสุดของพวกเขาด้วยการเลื่อนที่ไม่สิ้นสุด เราสามารถนำทางจากโปรไฟล์ผู้ใช้หนึ่งไปยังอีกโปรไฟล์หนึ่งได้ ในสถาปัตยกรรม Flux สิ่งนี้จะสอดคล้องกับ Stores และ Dispatchers อย่างไร เราจะใช้หนึ่งคนPostStoreต่อผู้ใช้หรือเราจะมีร้านค้าระดับโลกบ้างไหม? แล้วผู้มอบหมายงานเราจะสร้างผู้มอบหมายงานใหม่สำหรับ "หน้าผู้ใช้" แต่ละหน้าหรือจะใช้ซิงเกิลตัน สุดท้ายส่วนใดของสถาปัตยกรรมที่รับผิดชอบในการจัดการวงจรชีวิตของร้านค้า“ เฉพาะเพจ” เพื่อตอบสนองต่อการเปลี่ยนแปลงเส้นทาง ยิ่งไปกว่านั้นหน้าหลอกหน้าเดียวอาจมีรายการข้อมูลประเภทเดียวกันหลายรายการ ยกตัวอย่างเช่นในหน้าโปรไฟล์ของผมต้องการที่จะแสดงทั้งติดตามและดังต่อไปนี้ Singleton สามารถUserStoreทำงานได้อย่างไรในกรณีนี้? จะUserPageStoreจัดการfollowedBy: UserStoreและfollows: UserStore?

132 javascript  facebook  architecture  reactjs  reactjs-flux 

ฉันยังใหม่กับ ReactJS และ UI และฉันต้องการทราบวิธีสร้างการโทร POST แบบ REST แบบง่ายๆจากโค้ด ReactJS หากมีตัวอย่างมานำเสนอคงจะเป็นประโยชน์จริงๆ

126 reactjs  reactjs-flux  reactjs-native 

หากร้านค้ารักษาสถานะของตัวเองและมีความสามารถในการเรียกใช้บริการเครือข่ายและการจัดเก็บข้อมูลในการดำเนินการดังกล่าว ... ในกรณีนี้การกระทำเป็นเพียงผู้ส่งข้อความที่โง่เขลา -หรือ- ... ร้านค้าควรเป็นผู้รับข้อมูลที่ไม่เปลี่ยนรูปแบบเป็นใบ้จากการดำเนินการ (และการดำเนินการเป็นข้อมูลที่ดึง / ส่งข้อมูลระหว่างแหล่งภายนอกหรือไม่การจัดเก็บในอินสแตนซ์นี้จะทำหน้าที่เป็นมุมมองแบบจำลองและจะสามารถรวม / กรองข้อมูลได้ ข้อมูลก่อนที่จะตั้งฐานสถานะของตนเองบนข้อมูลที่ไม่เปลี่ยนรูปที่ถูกป้อนโดยการกระทำ สำหรับฉันแล้วดูเหมือนว่ามันควรจะเป็นอย่างใดอย่างหนึ่ง (แทนที่จะผสมทั้งสองอย่าง) ถ้าเป็นเช่นนั้นเหตุใดจึงเป็นที่ต้องการ / แนะนำมากกว่าอีกรายการหนึ่ง?

122 reactjs  reactjs-flux 

หนึ่งในข้อได้เปรียบที่ใหญ่ที่สุดของReact.jsควรจะเป็นการแสดงผลด้านเซิร์ฟเวอร์ ปัญหาคือฟังก์ชันคีย์React.renderComponentToString()เป็นแบบซิงโครนัสซึ่งทำให้ไม่สามารถโหลดข้อมูลอะซิงโครนัสใด ๆ ได้เนื่องจากลำดับชั้นของคอมโพเนนต์แสดงบนเซิร์ฟเวอร์ สมมติว่าฉันมีองค์ประกอบสากลสำหรับการแสดงความคิดเห็นซึ่งฉันสามารถวางไว้ที่ใดก็ได้บนหน้า มีเพียงคุณสมบัติเดียวตัวระบุบางประเภท (เช่น id ของบทความด้านล่างที่มีการใส่ความคิดเห็น) และทุกอย่างจะถูกจัดการโดยคอมโพเนนต์เอง (การโหลดการเพิ่มการจัดการความคิดเห็น) ฉันชอบสถาปัตยกรรมFluxมากเพราะมันทำให้หลาย ๆ อย่างง่ายขึ้นมากและร้านค้าก็เหมาะสำหรับการแชร์สถานะระหว่างเซิร์ฟเวอร์และไคลเอนต์ เมื่อเริ่มต้นร้านค้าของฉันที่มีความคิดเห็นแล้วฉันก็สามารถทำให้เป็นซีเรียลไลซ์และส่งจากเซิร์ฟเวอร์ไปยังไคลเอนต์ซึ่งเรียกคืนได้อย่างง่ายดาย คำถามคือวิธีใดเป็นวิธีที่ดีที่สุดในการเติมข้อมูลร้านค้าของฉัน ในช่วงหลายวันที่ผ่านมาฉัน Googling มากและฉันเจอกลยุทธ์บางอย่างซึ่งดูเหมือนจะไม่ดีเลยเมื่อพิจารณาว่าคุณสมบัติของ React นี้ได้รับการ "โปรโมต" มากแค่ไหน ในความคิดของฉันวิธีที่ง่ายที่สุดคือเติมข้อมูลร้านค้าทั้งหมดของฉันก่อนที่การแสดงผลจริงจะเริ่มขึ้น นั่นหมายถึงบางแห่งที่อยู่นอกลำดับชั้นของส่วนประกอบ (เช่นต่อกับเราเตอร์ของฉัน) ปัญหาของวิธีนี้คือฉันจะต้องกำหนดโครงสร้างหน้าสองครั้ง พิจารณาหน้าเว็บที่ซับซ้อนมากขึ้นตัวอย่างเช่นหน้าบล็อกที่มีส่วนประกอบต่างๆมากมาย (โพสต์ในบล็อกจริงความคิดเห็นโพสต์ที่เกี่ยวข้องโพสต์ใหม่ล่าสุดกระแส Twitter ... ) ฉันจะต้องออกแบบโครงสร้างเพจโดยใช้ส่วนประกอบ React จากนั้นที่อื่นฉันจะต้องกำหนดขั้นตอนการเติมข้อมูลแต่ละร้านที่ต้องการสำหรับเพจปัจจุบันนี้ ดูเหมือนจะไม่ใช่ทางออกที่ดีสำหรับฉัน น่าเสียดายที่แบบฝึกหัด isomorphic ส่วนใหญ่ได้รับการออกแบบด้วยวิธีนี้ (เช่นการสอนเกี่ยวกับฟลักซ์ที่ยอดเยี่ยมนี้) ตอบสนอง-async แนวทางนี้เหมาะอย่างยิ่ง ช่วยให้ฉันกำหนดฟังก์ชันพิเศษในแต่ละองค์ประกอบว่าจะเริ่มต้นสถานะอย่างไร (ไม่สำคัญว่าจะซิงโครนัสหรืออะซิงโครนัส) และฟังก์ชันเหล่านี้เรียกว่าลำดับชั้นกำลังแสดงผลเป็น HTML มันทำงานในลักษณะที่ส่วนประกอบจะไม่แสดงผลจนกว่าสถานะจะเริ่มต้นอย่างสมบูรณ์ ปัญหาคือมันต้องใช้Fibersซึ่งเท่าที่ฉันเข้าใจส่วนขยาย Node.js ที่เปลี่ยนแปลงพฤติกรรม …

114 node.js  reactjs  flux  reactjs-flux 

นี่คือแบบฟอร์มของฉันและวิธีการ onClick ฉันต้องการใช้วิธีนี้เมื่อกดปุ่ม Enter ของแป้นพิมพ์ อย่างไร? หมายเหตุ: ไม่มีการชื่นชม jquery comment: function (e) { e.preventDefault(); this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value}) }, <form className="commentForm"> <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text" /><br /> <input type="text" placeholder="userPostId" ref="userPostId" /> <br /> <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button> </form>

111 reactjs  reactjs-flux 

/publicฉันเท่านั้นที่สามารถดูแอปที่เกิดขึ้นจริงภายใต้ การกำหนดค่าwebpack.config.jsอยู่ด้านล่าง: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() …

93 node.js  reactjs  webpack  reactjs-flux  webpack-dev-server 

ฉันต้องการทราบวิธีการสลับสถานะบูลีนของส่วนประกอบปฏิกิริยา ตัวอย่างเช่น: ฉันมีการตรวจสอบสถานะบูลีนในตัวสร้างส่วนประกอบของฉัน: constructor(props, context) { super(props, context); this.state = { check: false }; }; ฉันพยายามสลับสถานะทุกครั้งที่มีการคลิกช่องทำเครื่องหมายโดยใช้เมธอด this.setState: <label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label> แน่นอนผมได้รับUncaught ReferenceError: การตรวจสอบไม่ได้กำหนดไว้ แล้วฉันจะบรรลุเป้าหมายนี้ได้อย่างไร? ขอบคุณมากล่วงหน้า

90 javascript  reactjs  reactjs-flux 

ฉันเขียนแอปใหม่เพื่อใช้ Flux และฉันมีปัญหาในการดึงข้อมูลจากร้านค้า ฉันมีส่วนประกอบมากมายและพวกมันก็ทำรังมากมาย บางอันมีขนาดใหญ่ ( Article) บางอันมีขนาดเล็กและเรียบง่าย ( UserAvatar, UserLink) ฉันกำลังดิ้นรนกับลำดับชั้นขององค์ประกอบที่ฉันควรอ่านข้อมูลจากร้านค้า ฉันลองสองวิธีที่รุนแรงซึ่งฉันไม่ชอบ: ส่วนประกอบเอนทิตีทั้งหมดอ่านข้อมูลของตนเอง ส่วนประกอบแต่ละรายการที่ต้องการข้อมูลบางส่วนจาก Store จะได้รับเพียง ID เอนทิตีและดึงข้อมูลเอนทิตีด้วยตัวเอง ตัวอย่างเช่นArticleมีการส่งผ่านarticleId, UserAvatarและจะถูกส่งผ่านUserLinkuserId แนวทางนี้มีข้อเสียที่สำคัญหลายประการ (กล่าวถึงภายใต้ตัวอย่างโค้ด) var Article = React.createClass({ mixins: [createStoreMixin(ArticleStore)], propTypes: { articleId: PropTypes.number.isRequired }, getStateFromStores() { return { article: ArticleStore.get(this.props.articleId); } }, render() { var article = this.state.article, userId = …

89 javascript  reactjs  reactjs-flux