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

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

1126 javascript  reactjs  reactjs-flux  flux  redux 

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

891 javascript  redux  react-redux  timeout 

ตามเอกสารที่"โดยตัวกลาง Redux เก็บสนับสนุนเฉพาะการไหลของข้อมูลซิงโคร" ฉันไม่เข้าใจว่าทำไมถึงเป็นเช่นนี้ ทำไมส่วนประกอบคอนเทนเนอร์ไม่สามารถเรียกใช้ async API จากนั้นจึงdispatchดำเนินการ ตัวอย่างเช่นลองจินตนาการถึง UI ที่เรียบง่าย: ฟิลด์และปุ่ม เมื่อผู้ใช้กดปุ่มฟิลด์จะถูกเติมด้วยข้อมูลจากเซิร์ฟเวอร์ระยะไกล import * as React from 'react'; import * as Redux from 'redux'; import { Provider, connect } from 'react-redux'; const ActionTypes = { STARTED_UPDATING: 'STARTED_UPDATING', UPDATED: 'UPDATED' }; class AsyncApi { static getFieldValue() { const promise = …

686 javascript  asynchronous  reactjs  redux  redux-thunk 

มีจำนวนมากของการพูดคุยเกี่ยวกับเด็กล่าสุดในเมือง Redux คือตอนนี้Redux-วีรชน / Redux-เทพนิยาย มันใช้ฟังก์ชั่นเครื่องกำเนิดสำหรับการฟังการกระทำ ก่อนที่ฉันจะพันหัวฉันอยากรู้ว่าข้อดี / ข้อเสียของการใช้redux-sagaแทนที่จะเป็นวิธีการด้านล่างที่ฉันใช้redux-thunkกับ async / รอ ส่วนประกอบอาจมีลักษณะเช่นนี้ส่งการกระทำเหมือนปกติ import { login } from 'redux/auth'; class LoginForm extends Component { onClick(e) { e.preventDefault(); const { user, pass } = this.refs; this.props.dispatch(login(user.value, pass.value)); } render() { return (<div> <input type="text" ref="user" /> <input type="password" ref="pass" /> <button …

488 javascript  reactjs  redux  redux-thunk  redux-saga 

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

455 javascript  redux  store  redux-store 

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

358 reactjs  redux  react-redux 

พูดว่าฉันมีดังต่อไปนี้: export const SOME_ACTION = 'SOME_ACTION'; export function someAction() { return { type: SOME_ACTION, } } และในผู้สร้างการกระทำนั้นฉันต้องการเข้าถึงสถานะร้านค้าทั่วโลก (ตัวลดทั้งหมด) มันจะดีกว่าถ้าทำสิ่งนี้: import store from '../store'; export const SOME_ACTION = 'SOME_ACTION'; export function someAction() { return { type: SOME_ACTION, items: store.getState().otherReducer.items, } } หรือสิ่งนี้: export const SOME_ACTION = 'SOME_ACTION'; export function someAction() { …

296 javascript  redux 

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

243 reactjs  redux  flux  reactjs-flux 

ฉันกำลังสร้างแอพที่จำเป็นต้องแสดงข้อความยืนยันในบางสถานการณ์ สมมติว่าฉันต้องการลบบางอย่างจากนั้นฉันจะส่งการกระทำเช่น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 

ฉันกำลังเรียนรู้ Redux ด้วย React และสะดุดกับรหัสนี้ ฉันไม่แน่ใจว่าเป็นเฉพาะReduxหรือไม่ แต่ฉันได้เห็นข้อมูลโค้ดต่อไปนี้ในหนึ่งในตัวอย่าง @connect((state) => { return { key: state.a.b }; }) ในขณะที่การทำงานของconnectตรงไปตรงสวย แต่ฉันไม่เข้าใจก่อน@ connectมันไม่ได้เป็นโอเปอเรเตอร์ JavaScript หากฉันไม่ผิด บางคนสามารถอธิบายได้ว่าอะไรคือสิ่งนี้และทำไมจึงใช้ ปรับปรุง: อันที่จริงแล้วมันเป็นส่วนหนึ่งreact-reduxที่ใช้เชื่อมต่อส่วนประกอบ React เข้ากับ Redux store

226 javascript  reactjs  decorator  redux 

ตามที่ทราบ: ฉันได้อ่านเอกสารสำหรับ Redux (Baobab ด้วย) และฉันได้ทำส่วนแบ่งที่ยุติธรรมของ Googling & test ทำไมจึงแนะนำอย่างยิ่งว่าแอป Redux มีเพียงร้านเดียว? ฉันเข้าใจข้อดี / ข้อเสียของการตั้งค่าแบบ Single-store และการตั้งค่าแบบหลายสาขา ( มีคำถาม & คำตอบมากมายในเรื่องนี้ ) IMO การตัดสินใจทางสถาปัตยกรรมนี้เป็นของผู้พัฒนาแอพตามความต้องการของโครงการ เหตุใดจึงแนะนำอย่างยิ่งสำหรับ Redux ถึงขั้นที่ทำให้เกิดเสียงบังคับ ( แม้ว่าจะไม่มีสิ่งใดหยุดยั้งเราในการสร้างร้านค้าหลายแห่ง ) แก้ไข: ข้อเสนอแนะหลังจากแปลงเป็นร้านค้าเดียว หลังจากไม่กี่เดือนที่ทำงานกับ redux ในสิ่งที่หลายคนจะพิจารณาสปาที่ซับซ้อนฉันสามารถพูดได้ว่าโครงสร้างร้านเดียวได้รับความสุขที่บริสุทธิ์ในการทำงานกับ บางจุดที่อาจช่วยให้ผู้อื่นเข้าใจว่าเหตุใดร้านค้าเดียวกับร้านค้าจำนวนมากจึงเป็นคำถามที่สงสัยในหลายกรณีการใช้งาน: มันน่าเชื่อถือ : เราใช้ตัวเลือกเพื่อขุดผ่านสถานะแอพและรับข้อมูลที่เกี่ยวข้องกับบริบท เรารู้ว่าข้อมูลที่จำเป็นทั้งหมดอยู่ในร้านเดียว มันหลีกเลี่ยงการตั้งคำถามทั้งหมดว่าประเด็นปัญหาของรัฐจะอยู่ที่ไหน มันเร็ว : ร้านค้าของเรามี 100 reducers ใกล้ถ้าไม่มาก แม้ในจำนวนนั้นมีเพียง reducers เพียงเล็กน้อยเท่านั้นที่ประมวลผลข้อมูลในการแจกจ่ายใด …

221 javascript  redux 

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

220 javascript  reactjs  redux  react-redux 

หลังจากใช้เวลาในการเรียนรู้ทำปฏิกิริยาฉันเข้าใจความแตกต่างระหว่างกระบวนทัศน์หลักสองประการของการสร้างส่วนประกอบ คำถามของฉันคือเมื่อฉันควรใช้ที่หนึ่งและทำไม สิทธิประโยชน์ / การแลกเปลี่ยนของหนึ่งเหนือสิ่งอื่นคืออะไร? คลาส ES6: import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( <div></div> ); } } การทำงาน: const MyComponent = (props) => { return ( <div></div> ); } ฉันคิดว่าการทำงานเมื่อใดก็ตามที่ไม่มีสถานะที่จะจัดการโดยองค์ประกอบนั้น แต่มันคืออะไร? ฉันเดาว่าถ้าฉันใช้วิธีวงจรชีวิตใด ๆ มันอาจจะดีที่สุดที่จะไปกับองค์ประกอบตามระดับ

212 javascript  reactjs  ecmascript-6  redux 

เป็นไปได้ไหมที่จะส่งการกระทำในตัวลดเอง? ฉันมีแถบความคืบหน้าและองค์ประกอบเสียง เป้าหมายคือการอัพเดทแถบความคืบหน้าเมื่อเวลาได้รับการปรับปรุงในองค์ประกอบเสียง แต่ฉันไม่รู้ว่าจะวางตำแหน่งตัวจัดการเหตุการณ์ ontime หรือวิธีส่งการดำเนินการในการเรียกกลับของ ontimeupdate เพื่ออัพเดทแถบความคืบหน้า นี่คือรหัสของฉัน: //reducer const initialState = { audioElement: new AudioElement('test.mp3'), progress: 0.0 } initialState.audioElement.audio.ontimeupdate = () => { console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration); //how to dispatch 'SET_PROGRESS_VALUE' now? }; const audio = (state=initialState, action) => { switch(action.type){ case 'SET_PROGRESS_VALUE': return Object.assign({}, state, {progress: action.progress}); default: return …

197 reactjs  redux  reducers 

@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