คำถามติดแท็ก redux

ฉันเห็นว่าmapStateToPropsและmapDispatchToPropsฟังก์ชันที่ส่งผ่านไปยังconnectฟังก์ชันใน Redux ใช้ownPropsเป็นอาร์กิวเมนต์ที่สอง [mapStateToProps(state, [ownProps]): stateProps] (Function): [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): [ownprops]อาร์กิวเมนต์เป็นทางเลือกสำหรับอะไร? ฉันกำลังมองหาตัวอย่างเพิ่มเติมเพื่อทำให้ชัดเจนเนื่องจากมีอยู่แล้วในเอกสาร Redux

97 redux  react-redux 

ฉันกำลังทำงานกับโปรเจ็กต์ที่มี typescript, React และ Redux (ทั้งหมดทำงานใน Electron) และฉันพบปัญหาเมื่อฉันรวมองค์ประกอบตามคลาสหนึ่งในอีกอันและพยายามส่งผ่านพารามิเตอร์ระหว่างพวกเขา พูดอย่างหลวม ๆ ฉันมีโครงสร้างต่อไปนี้สำหรับส่วนประกอบคอนเทนเนอร์: class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = this.props; ... <ChildComponent propToPass={propToPass} /> ... } } .... export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent); และองค์ประกอบลูก: interface IChildComponentProps extends React.Props<any> { propToPass: any } class ChildComponent extends React.Component<IChildComponentProps, …

96 reactjs  typescript  redux  electron  jsx 

ฉันกำลังแยกตัวอย่างสิ่งที่ต้องทำของ Redux เพื่อพยายามทำความเข้าใจ ฉันอ่านว่าmapDispatchToPropsช่วยให้คุณสามารถจับคู่การดำเนินการจัดส่งเป็นอุปกรณ์ประกอบฉากได้ดังนั้นฉันจึงคิดว่าaddTodo.jsจะเขียนใหม่เพื่อใช้ mapDispatchToProps แทนการเรียกการจัดส่ง (addTodo ()) addingTodo()ผมเรียกมันว่า สิ่งนี้: import React from 'react'; import {connect} from 'react-redux'; import addTodo from '../actions'; let AddTodo = ({addingTodo}) => { let input; return ( <div> <form onSubmit={e => { e.preventDefault() if (!input.value.trim()) { return } addingTodo(input.value) input.value = "" }}> <input ref={node …

95 javascript  reactjs  redux  react-redux 

ฉันกำลังพยายามแยกองค์ประกอบการนำเสนอออกจากส่วนประกอบคอนเทนเนอร์ ฉันมีSitesTableและSitesTableContainer. คอนเทนเนอร์มีหน้าที่ทริกเกอร์การกระทำซ้ำซ้อนเพื่อดึงข้อมูลไซต์ที่เหมาะสมตามผู้ใช้ปัจจุบัน ปัญหาคือผู้ใช้ปัจจุบันถูกดึงข้อมูลแบบอะซิงโครนัสหลังจากที่ส่วนประกอบคอนเทนเนอร์ได้รับการแสดงผลในตอนแรก ซึ่งหมายความว่าส่วนประกอบคอนเทนเนอร์ไม่ทราบว่าจำเป็นต้องเรียกใช้โค้ดอีกครั้งในcomponentDidMountฟังก์ชันซึ่งจะอัปเดตข้อมูลเพื่อส่งไปยังไฟล์SitesTable. ฉันคิดว่าฉันจำเป็นต้องเรนเดอร์คอมโพเนนต์คอนเทนเนอร์อีกครั้งเมื่อมีการเปลี่ยนแปลงอุปกรณ์ประกอบฉาก (ผู้ใช้) ฉันจะทำอย่างไรให้ถูกต้อง? class SitesTableContainer extends React.Component { static get propTypes() { return { sites: React.PropTypes.object, user: React.PropTypes.object, isManager: React.PropTypes.boolean } } componentDidMount() { if (this.props.isManager) { this.props.dispatch(actions.fetchAllSites()) } else { const currentUserId = this.props.user.get('id') this.props.dispatch(actions.fetchUsersSites(currentUserId)) } } render() { return <SitesTable sites={this.props.sites}/> } } …

95 reactjs  redux  react-redux 

ฉันอาจจะพลาดอะไรบางอย่างที่ชัดเจนและอยากจะเคลียร์ตัวเอง นี่คือความเข้าใจของฉัน ในความไร้เดียงสาตอบสนององค์ประกอบที่เรามีและstates propsการอัปเดตstateด้วยsetStateการแสดงผลองค์ประกอบทั้งหมดอีกครั้ง propsส่วนใหญ่จะอ่านอย่างเดียวและการอัปเดตไม่สมเหตุสมผล ในคอมโพเนนต์การตอบสนองที่สมัครสมาชิกร้านค้าสำรองผ่านบางสิ่งบางอย่างเช่นstore.subscribe(render)เห็นได้ชัดว่าแสดงผลซ้ำทุกครั้งที่มีการอัปเดตร้านค้า react-reduxมีตัวช่วยconnect()ที่ฉีดส่วนหนึ่งของ state tree (ซึ่งเป็นที่สนใจของส่วนประกอบ) และ actionCreators propsสำหรับส่วนประกอบโดยปกติจะผ่านสิ่งต่างๆเช่น const TodoListComponent = connect( mapStateToProps, mapDispatchToProps )(TodoList) แต่ด้วยความเข้าใจว่า a setStateเป็นสิ่งจำเป็นสำหรับการTodoListComponentตอบสนองต่อการเปลี่ยนแปลงโครงสร้างของสถานะ redux (re-render) ฉันไม่พบโค้ดใด ๆstateหรือsetStateที่เกี่ยวข้องในTodoListไฟล์คอมโพเนนต์ มันอ่านประมาณนี้: const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> ) …

94 reactjs  redux  react-redux 

เท่าที่ฉันรู้และแก้ไขฉันหากฉันผิดredux-thunkเป็นมิดเดิลแวร์ที่ช่วยให้เราจัดส่งฟังก์ชัน async และค่าดีบักในการดำเนินการเองในขณะที่ฉันใช้สัญญา reduxฉันไม่สามารถสร้างฟังก์ชัน async ได้โดยไม่ต้องใช้งานของฉันเอง กลไกในขณะที่ Action จะยกเว้นการส่งเฉพาะวัตถุธรรมดาเท่านั้น อะไรคือความแตกต่างที่สำคัญระหว่างสองแพ็คเกจนี้? มีประโยชน์อะไรบ้างจากการใช้ทั้งสองแพ็คเกจในแอปตอบกลับหน้าเดียวหรือติดกับ redux-thunk ก็เพียงพอแล้วหรือไม่?

93 reactjs  redux  redux-thunk  redux-promise 

เอกสารReduxสำหรับbindActionCreatorsระบุว่า: กรณีใช้งานเพียงอย่างเดียวbindActionCreatorsคือเมื่อคุณต้องการส่งต่อผู้สร้างการกระทำบางอย่างไปยังส่วนประกอบที่ไม่รู้จัก Redux และคุณไม่ต้องการส่งต่อหรือจัดเก็บ Redux ไปที่มัน จะเป็นตัวอย่างอะไรได้บ้างbindActionCreators/ จำเป็นต้องใช้? ซึ่งชนิดขององค์ประกอบที่จะไม่ทราบRedux ? ข้อดี / ข้อเสียของทั้งสองทางเลือกคืออะไร? //actionCreator import * as actionCreators from './actionCreators' function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return bindActionCreators(actionCreators, dispatch) } เทียบกับ function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } …

93 reactjs  redux  react-redux 

ฉันกำลังดำเนินการตรวจสอบแอปพลิเคชันส่วนหน้าที่มีความซับซ้อนปานกลาง ในขณะนี้มันเขียนด้วย javascript ล้วนมีข้อความตามเหตุการณ์ที่แตกต่างกันมากมายซึ่งเชื่อมต่อกับส่วนหลักบางส่วนของแอปพลิเคชันนี้ เราตัดสินใจว่าเราจำเป็นต้องใช้คอนเทนเนอร์สถานะบางประเภทสำหรับแอปพลิเคชันนี้ในขอบเขตของการปรับโครงสร้างเพิ่มเติม ก่อนหน้านี้ฉันมีประสบการณ์เกี่ยวกับร้านค้า redux และ ngrx (ซึ่งเป็นไปตามหลักการเดียวกัน) ดัดแปลงเป็นตัวเลือกสำหรับเรา แต่อย่างหนึ่งของนักพัฒนาที่เสนอให้ใช้ห้องสมุดตามรัฐเครื่องโดยเฉพาะในห้องสมุด xstate ฉันไม่เคยทำงานกับ xstate ดังนั้นฉันจึงพบว่ามันน่าสนใจและเริ่มอ่านเอกสารประกอบและดูตัวอย่างต่างๆ ดูมีแนวโน้มและมีพลัง แต่เมื่อถึงจุดหนึ่งฉันก็เข้าใจว่าฉันไม่เห็นความแตกต่างอย่างมีนัยสำคัญระหว่างมันกับ redux ฉันใช้เวลาหลายชั่วโมงในการพยายามหาคำตอบหรือข้อมูลอื่น ๆ ที่เปรียบเทียบ xstate และ redux ฉันไม่พบข้อมูลที่ชัดเจนยกเว้นบางบทความเช่น"get from redux to a state machine"หรือลิงก์ไปยังไลบรารีที่เน้นการใช้ redux และ xstate ร่วมกัน (ค่อนข้างแปลก) หากมีใครสามารถอธิบายความแตกต่างหรือบอกฉันได้ว่าเมื่อใดที่นักพัฒนาควรเลือก xstate - ยินดีต้อนรับสู่

93 javascript  redux  state-machine  xstate 

ฉันกำลังทำงานในโครงการ React และพบปัญหาที่ทำให้ฉันนิ่งงัน เมื่อใดก็ตามที่ฉันเรียกใช้yarn startฉันพบข้อผิดพลาดนี้: TypeError [ERR_INVALID_ARG_TYPE]: อาร์กิวเมนต์ "พา ธ " ต้องเป็นสตริงประเภท ได้รับประเภทไม่ได้กำหนด ฉันไม่รู้ว่าทำไมสิ่งนี้ถึงเกิดขึ้นถ้าใครมีประสบการณ์ฉันจะรู้สึกขอบคุณ

92 javascript  reactjs  redux  visual-studio-code  yarnpkg 

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

92 reactjs  redux  flux 

ปกติฉันจะโพสต์สิ่งที่เกี่ยวข้องกับรหัสบน Stack แต่นี่เป็นคำถามมากกว่าว่าความคิดทั่วไปของชุมชนคืออะไร ดูเหมือนว่าจะมีผู้คนมากมายที่สนับสนุนการใช้ Redux กับ React เพื่อจัดการข้อมูล / สถานะ แต่ในขณะที่อ่านและเรียนรู้ทั้งสองอย่างฉันได้เจอบางสิ่งที่ดูไม่ถูกต้องนัก Redux ที่ด้านล่างของหน้านี้: http://redux.js.org/docs/basics/UsageWithReact.html (ผ่านร้านค้า) ขอแนะนำให้ใช้ "Magic" ของ React "Context" ทางเลือกหนึ่งคือการส่งต่อไปยังส่วนประกอบคอนเทนเนอร์ทุกชิ้น อย่างไรก็ตามมันน่าเบื่อเนื่องจากคุณต้องจัดเก็บสายไฟแม้กระทั่งผ่านส่วนประกอบในการนำเสนอเพียงเพราะมันเกิดขึ้นกับการแสดงผลคอนเทนเนอร์ที่อยู่ลึกลงไปในโครงสร้างส่วนประกอบ ตัวเลือกที่เราแนะนำคือใช้ส่วนประกอบ React Redux พิเศษที่เรียกว่าเพื่อทำให้ร้านค้าพร้อมใช้งานสำหรับส่วนประกอบคอนเทนเนอร์ทั้งหมด ... ตอบสนอง ในหน้า React Context ( https://facebook.github.io/react/docs/context.html ) จะมีคำเตือนที่ด้านบน: บริบทเป็นคุณลักษณะขั้นสูงและเป็นการทดลอง API มีแนวโน้มที่จะเปลี่ยนแปลงในอนาคต จากนั้นที่ด้านล่าง: เช่นเดียวกับที่หลีกเลี่ยงตัวแปรส่วนกลางได้ดีที่สุดเมื่อเขียนโค้ดที่ชัดเจนคุณควรหลีกเลี่ยงการใช้บริบทในกรณีส่วนใหญ่ ... อย่าใช้บริบทเพื่อส่งผ่านข้อมูลโมเดลของคุณผ่านส่วนประกอบ การเธรดข้อมูลของคุณผ่านโครงสร้างอย่างชัดเจนนั้นเข้าใจง่ายกว่ามาก ... ดังนั้น... Redux แนะนำให้ใช้คุณสมบัติ React 'Context' แทนที่จะส่งต่อstoreไปยังแต่ละองค์ประกอบผ่าน …

91 javascript  reactjs  redux 

ฉันกำลังดิ้นรนเพื่อหาปัญหาเกี่ยวกับไวยากรณ์ต่อไปนี้: export const sendVerificationEmail = async () => (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: EMAIL_FETCHING, payload: false })) } catch (error) { dispatch({ type: EMAIL_FETCHING, payload: false }); throw new Error(error); } }; ฉันได้รับข้อผิดพลาดอยู่เสมอว่า: การรอคอยเป็นคำสงวน ... แต่มันไม่ถูกต้องตามกฎหมายในฟังก์ชัน async ใช่หรือไม่? บิตการจัดส่งมาจากไลบรารีreact-thunk

91 javascript  reactjs  async-await  redux 

ฉันมีการทดสอบหน่วยสำหรับreducersไฟล์. อย่างไรก็ตามเมื่อฉันทำการดีบักในเบราว์เซอร์ฉันต้องการตรวจสอบว่าการกระทำของฉันถูกเรียกอย่างถูกต้องหรือไม่และสถานะได้รับการแก้ไขตามนั้นหรือไม่ ฉันกำลังมองหาสิ่งที่ต้องการ: window._redux.store ... ในเบราว์เซอร์เพื่อให้ฉันพิมพ์สิ่งนั้นบนคอนโซลและตรวจสอบว่าสิ่งต่างๆเป็นอย่างไร ฉันจะบรรลุสิ่งนั้นได้อย่างไร?

91 javascript  reactjs  redux 

สมมติว่าฉันมีการสลับง่ายๆ: เมื่อฉันคลิกปุ่มส่วนประกอบสีจะเปลี่ยนไปมาระหว่างสีแดงและสีน้ำเงิน ฉันอาจจะบรรลุผลโดยการทำอะไรแบบนี้ index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': return {color: true} แต่นี่เป็นโค้ดจำนวนมากที่ต้องเขียนสำหรับบางสิ่งที่ฉันสามารถทำได้ใน 5 วินาทีด้วย jQuery บางคลาสและ css ... ฉันเดาว่าสิ่งที่ฉันถามจริงๆคือฉันทำอะไรผิดที่นี่?

90 javascript  reactjs  redux 

ฉันมีตัวลดและในการคำนวณสถานะใหม่ฉันต้องการข้อมูลจากการกระทำและข้อมูลจากส่วนหนึ่งของสถานะที่ไม่ได้จัดการโดยตัวลดนี้ โดยเฉพาะในตัวลดที่ฉันจะแสดงด้านล่างฉันต้องการเข้าถึงaccountDetails.stateOfResidenceIdฟิลด์ initialState.js: export default { accountDetails: { stateOfResidenceId: '', accountType: '', accountNumber: '', product: '' }, forms: { blueprints: [ ] } }; formReducer.js: import * as types from '../constants/actionTypes'; import objectAssign from 'object-assign'; import initialState from './initialState'; import formsHelper from '../utils/FormsHelper'; export default function formsReducer(state = initialState.forms, action) …

88 javascript  reactjs  redux