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

ฉันมีการดำเนินการที่อัพเดตสถานะการแจ้งเตือนของแอปพลิเคชันของฉัน โดยปกติแล้วการแจ้งเตือนนี้จะเป็นข้อผิดพลาดหรือข้อมูลบางประเภท ฉันต้องส่งการกระทำอื่นหลังจาก 5 วินาทีที่จะกลับสถานะการแจ้งเตือนไปยังการเริ่มต้นดังนั้นจึงไม่มีการแจ้งเตือน เหตุผลหลักที่อยู่เบื้องหลังสิ่งนี้คือเพื่อมอบฟังก์ชันการทำงานที่การแจ้งเตือนหายไปโดยอัตโนมัติหลังจาก 5 วินาที ฉันไม่มีโชคกับการใช้งานsetTimeoutและกลับมาดำเนินการอีกครั้งและไม่สามารถหาวิธีการออนไลน์ได้ ดังนั้นคำแนะนำใด ๆ ยินดีต้อนรับ

891 javascript  redux  react-redux  timeout 

ฉันอ่านเอกสารสำหรับห้องสมุด Redux และมันมีตัวอย่างนี้: นอกเหนือจากการอ่านสถานะแล้วส่วนประกอบคอนเทนเนอร์ยังสามารถส่งการกระทำได้ ในทำนองเดียวกันคุณสามารถกำหนดฟังก์ชั่นที่เรียกmapDispatchToProps()ว่ารับdispatch()วิธีการและส่งกลับอุปกรณ์ประกอบฉากโทรกลับที่คุณต้องการฉีดเข้าไปในองค์ประกอบการนำเสนอ จริง ๆ แล้วมันไม่มีเหตุผล ทำไมคุณต้องการmapDispatchToPropsเมื่อคุณมีmapStateToProps? พวกเขายังให้ตัวอย่างโค้ดที่มีประโยชน์นี้: const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } ใครช่วยอธิบายในแง่ของคนธรรมดาได้ว่าฟังก์ชั่นนี้คืออะไรและทำไมมันถึงมีประโยชน์?

358 reactjs  redux  react-redux 

ฉันกำลังสร้างแอพที่จำเป็นต้องแสดงข้อความยืนยันในบางสถานการณ์ สมมติว่าฉันต้องการลบบางอย่างจากนั้นฉันจะส่งการกระทำเช่นdeleteSomething(id)นั้นบางตัวลดจะจับเหตุการณ์นั้นและจะเติมตัวลดการโต้ตอบเพื่อแสดง ข้อสงสัยของฉันเกิดขึ้นเมื่อกล่องโต้ตอบนี้ส่ง ส่วนประกอบนี้จะส่งการกระทำที่เหมาะสมตามการกระทำแรกที่ส่งไปได้อย่างไร ผู้สร้างแอ็คชั่นควรจัดการกับตรรกะนี้หรือไม่? เราสามารถเพิ่มการกระทำภายในตัวลดได้หรือไม่? แก้ไข: เพื่อให้ชัดเจน: deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id) createThingB(id) => Show dialog with Questions => createThingBRemotely(id) ดังนั้นฉันจึงพยายามใช้องค์ประกอบการโต้ตอบใหม่ การแสดง / ซ่อนกล่องโต้ตอบไม่ใช่ปัญหาเพราะสามารถทำได้อย่างง่ายดายในตัวลด สิ่งที่ฉันพยายามระบุก็คือวิธีส่งการกระทำจากด้านขวาตามการกระทำที่เริ่มต้นการไหลทางด้านซ้าย

240 javascript  modal-dialog  redux  react-redux 

ฉันพยายามที่จะเข้าใจวิธีการเชื่อมต่อของ react-redux และฟังก์ชั่นที่ใช้เป็นพารามิเตอร์ mapStateToProps()โดยเฉพาะอย่างยิ่ง วิธีที่ฉันเข้าใจมันมูลค่าส่งคืนของmapStateToPropsจะเป็นวัตถุที่ได้มาจากสถานะ (ตามที่อาศัยอยู่ในร้านค้า) ซึ่งจะมีการส่งคีย์ไปยังองค์ประกอบเป้าหมายของคุณ ซึ่งหมายความว่าสถานะที่ใช้งานโดยองค์ประกอบเป้าหมายของคุณสามารถมีโครงสร้างที่แตกต่างจากรัฐในขณะที่เก็บไว้ในร้านค้าของคุณ ถาม: ตกลงไหม ถาม: นี่เป็นสิ่งที่คาดหวังหรือไม่ ถาม: นี่เป็นรูปแบบต่อต้านหรือไม่

220 javascript  reactjs  redux  react-redux 

POSTคำขอaxios กดปุ่ม url บนคอนโทรลเลอร์ แต่การตั้งค่า null เป็นคลาส POJO ของฉันเมื่อฉันไปถึงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน chrome โครเมี่ยม payload มีข้อมูล ผมทำอะไรผิดหรือเปล่า? คำขอ Axios POST: var body = { userName: 'Fred', userEmail: 'Flintstone@gmail.com' } axios({ method: 'post', url: '/addUser', data: body }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); การตอบสนองของเบราว์เซอร์: หากฉันตั้งค่าส่วนหัวเป็น: headers:{ Content-Type:'multipart/form-data' } คำขอส่งข้อผิดพลาด …

204 reactjs  react-redux  axios  ajaxform  axios-cookiejar-support 

@connectใช้งานได้ดีเมื่อฉันพยายามเข้าถึงร้านค้าภายในส่วนประกอบการตอบสนอง แต่ฉันจะเข้าถึงมันอย่างไรในรหัสบิตอื่น ตัวอย่างเช่นสมมติว่าฉันต้องการใช้โทเค็นการอนุญาตสำหรับการสร้างอินสแตนซ์ axios ที่สามารถใช้ได้ทั่วโลกในแอพของฉันสิ่งที่จะเป็นวิธีที่ดีที่สุดในการบรรลุเป้าหมายนั้น นี่เป็นของฉัน api.js // tooling modules import axios from 'axios' // configuration const api = axios.create() api.defaults.baseURL = 'http://localhost:5001/api/v1' api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here api.defaults.headers.post['Content-Type'] = 'application/json' export default api ตอนนี้ฉันต้องการเข้าถึงจุดข้อมูลจากร้านค้าของฉันนี่คือสิ่งที่จะดูเหมือนถ้าฉันพยายามดึงข้อมูลภายในส่วนประกอบที่ตอบสนองโดยใช้ @connect // connect to store @connect((store) => { return { auth: store.auth …

192 reactjs  redux  react-redux 

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

186 javascript  reactjs  redux  react-redux  react-context 

ฉันจะเพิ่มองค์ประกอบใน array arr[]ของ redux state ใน reducer ได้อย่างไร ฉันกำลังทำสิ่งนี้ - import {ADD_ITEM} from '../Actions/UserActions' const initialUserState = { arr:[] } export default function userState(state = initialUserState, action) { console.log(arr); switch (action.type) { case ADD_ITEM: return { ...state, arr: state.arr.push([action.newItem]) } default: return state } }

140 react-native  redux  react-redux 

ฉันเป็นมือใหม่ javascript / redux / react ที่สร้างแอปพลิเคชั่นขนาดเล็กที่มี redux, react-redux และ react ด้วยเหตุผลบางประการเมื่อใช้ฟังก์ชัน mapDispatchToProps ควบคู่กับการเชื่อมต่อ (การเชื่อมต่อแบบ react-redux) ฉันได้รับ TypeError ซึ่งระบุว่าการจัดส่งไม่ใช่ฟังก์ชันเมื่อฉันพยายามเรียกใช้ prop ที่เป็นผลลัพธ์ อย่างไรก็ตามเมื่อฉันเรียกการจัดส่งเป็นเสา (ดูฟังก์ชัน setAddr ในรหัสที่ให้มา) มันใช้งานได้ ฉันสงสัยว่าทำไมจึงเป็นเช่นนี้ในตัวอย่างแอป TODO ในเอกสาร redux เมธอด mapDispatchToProps ได้รับการตั้งค่าในลักษณะเดียวกัน เมื่อฉัน console.log (จัดส่ง) ภายในฟังก์ชันมันจะบอกว่าการจัดส่งเป็นวัตถุประเภท ฉันสามารถใช้การจัดส่งด้วยวิธีนี้ต่อไปได้ แต่ฉันจะรู้สึกดีขึ้นเมื่อทราบว่าเหตุใดจึงเกิดขึ้นก่อนที่จะดำเนินการต่อด้วย redux ฉันใช้ webpack กับ babel-loaders เพื่อรวบรวม รหัสของฉัน: import React, { PropTypes, …

124 javascript  reactjs  redux  react-redux 

ฉันจะเข้าถึงสถานะ redux ภายในฟังก์ชัน saga ได้อย่างไร คำตอบสั้น ๆ : import { select } from 'redux-saga/effects'; ... let data = yield select(stateSelectorFunction);

123 javascript  reactjs  redux  react-redux  redux-saga 

ในฐานะผู้เริ่มต้นสู่โลกแห่ง React ฉันต้องการทำความเข้าใจในเชิงลึกว่าเกิดอะไรขึ้นเมื่อฉันใช้{this.props.children}และสถานการณ์ที่จะใช้เหมือนกันคืออะไร ความเกี่ยวข้องของมันในข้อมูลโค้ดด้านล่างคืออะไร? render() { if (this.props.appLoaded) { return ( <div> <Header appName={this.props.appName} currentUser={this.props.currentUser} /> {this.props.children} </div> ); } }

118 javascript  reactjs  react-redux  frontend 

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

97 redux  react-redux 

ฉันกำลังแยกตัวอย่างสิ่งที่ต้องทำของ 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