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

ฉันกำลังพยายามส่งคำขอ GET เป็นพารามิเตอร์ที่สอง แต่ไม่ได้ผลในขณะที่ทำเป็น url วิธีนี้ได้ผล $ _GET ['naam'] ส่งกลับการทดสอบ: export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php?naam=test') .then((response) => { dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data}) }) .catch((err) => { dispatch({type: "SAVE_SCORE_FAILURE", payload: err}) }) } }; แต่เมื่อฉันลองสิ่งนี้ไม่มีอะไรเลย$_GET: export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php', { …

121 reactjs  react-native  redux  axios 

ฉันกำลังสร้างแอปที่จะต้องพร้อมใช้งานในหลายภาษาและสถานที่ คำถามของฉันไม่ใช่เรื่องทางเทคนิค แต่เป็นเรื่องของสถาปัตยกรรมและรูปแบบที่ผู้คนใช้ในการผลิตเพื่อแก้ปัญหานี้ ฉันไม่พบ "ตำราอาหาร" ที่ไหนเลยฉันจึงหันไปหาเว็บไซต์ถาม / ตอบที่ฉันชอบ :) นี่คือข้อกำหนดของฉัน (เป็น "มาตรฐาน" จริงๆ): ผู้ใช้สามารถเลือกภาษา (เล็กน้อย) เมื่อเปลี่ยนภาษาอินเทอร์เฟซควรแปลโดยอัตโนมัติเป็นภาษาที่เลือกใหม่ ฉันไม่กังวลเกี่ยวกับการจัดรูปแบบตัวเลขวันที่และอื่น ๆ มากเกินไปในขณะนี้ฉันต้องการวิธีง่ายๆในการแปลสตริง นี่คือวิธีแก้ปัญหาที่เป็นไปได้ที่ฉันคิดออก: แต่ละองค์ประกอบจัดการกับการแปลแยกกัน ซึ่งหมายความว่าแต่ละองค์ประกอบมีตัวอย่างเช่นชุดของไฟล์ en.json, fr.json เป็นต้นควบคู่ไปกับสตริงที่แปลแล้ว และฟังก์ชันตัวช่วยเพื่อช่วยในการอ่านค่าจากค่าที่ขึ้นอยู่กับภาษาที่เลือก Pro: เคารพในปรัชญาการตอบสนองมากขึ้นแต่ละองค์ประกอบเป็นแบบ "สแตนด์อโลน" จุดด้อย: คุณไม่สามารถรวมการแปลทั้งหมดไว้ในไฟล์ได้ (เช่นให้คนอื่นเพิ่มภาษาใหม่) จุดด้อย: คุณยังคงต้องส่งภาษาปัจจุบันเป็นเสาหลักในทุกองค์ประกอบที่เปื้อนเลือดและลูก ๆ ของพวกเขา แต่ละองค์ประกอบจะรับการแปลผ่านอุปกรณ์ประกอบฉาก ดังนั้นพวกเขาจึงไม่ทราบภาษาปัจจุบันพวกเขาเพียงแค่ใช้รายการสตริงเป็นอุปกรณ์ประกอบฉากที่ตรงกับภาษาปัจจุบัน Pro: เนื่องจากสตริงเหล่านั้นมาจาก "ด้านบน" จึงสามารถรวมศูนย์ไว้ที่ใดที่หนึ่งได้ จุดด้อย: ตอนนี้แต่ละองค์ประกอบเชื่อมโยงเข้ากับระบบการแปลคุณไม่สามารถใช้ซ้ำได้คุณต้องระบุสตริงที่ถูกต้องทุกครั้ง คุณหลีกเลี่ยงอุปกรณ์ประกอบฉากเล็กน้อยและอาจใช้บริบทเพื่อส่งผ่านภาษาปัจจุบัน Pro: ส่วนใหญ่โปร่งใสไม่ต้องส่งภาษาปัจจุบันและ / หรือคำแปลผ่านอุปกรณ์ประกอบฉากตลอดเวลา จุดด้อย: …

119 architecture  internationalization  reactjs  translation  redux 

ฉันรู้ว่าฉันไม่ควรกลายพันธุ์อินพุตและควรโคลนวัตถุเพื่อกลายพันธุ์ ฉันปฏิบัติตามแบบแผนที่ใช้กับโครงการเริ่มต้น redux ซึ่งใช้: ADD_ITEM: (state, action) => ({ ...state, items: [...state.items, action.payload.value], lastUpdated: action.payload.date }) สำหรับการเพิ่มรายการ - ฉันได้รับการใช้การแพร่กระจายเพื่อต่อท้ายรายการในอาร์เรย์ สำหรับการลบฉันใช้: DELETE_ITEM: (state, action) => ({ ...state, items: [...state.items.splice(0, action.payload), ...state.items.splice(1)], lastUpdated: Date.now() }) แต่นี่เป็นการกลายพันธุ์วัตถุสถานะอินพุต - สิ่งนี้ต้องห้ามแม้ว่าฉันจะส่งคืนวัตถุใหม่หรือไม่

118 javascript  reactjs  redux 

ฉันได้รับข้อผิดพลาดต่อไปนี้เมื่อพยายามเรียกใช้แอป React ของฉัน: ./src/components/App/App.js ข้อผิดพลาดในการนำเข้าที่พยายาม: 'combinationReducers' ไม่ได้ถูกส่งออกจาก '../../store/reducers/' นี่คือวิธีที่ฉันส่งออกcombineReducers: import { combineReducers } from 'redux'; import userReducers from './userReducers'; import articleReducers from './articleReducers'; export default combineReducers({ userReducers, articleReducers }); และนี่คือวิธีการนำเข้าในApp.js: import { combineReducers } from '../../store/reducers'; อะไรที่ไม่ถูกต้องในวิธีการที่ฉันส่งออกcombineReducers?

117 reactjs  redux 

ฉันยังใหม่กับ React Router และเรียนรู้ว่ามีหลายวิธีในการเปลี่ยนเส้นทางเพจ: การใช้ browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); การใช้ this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } ใน React Router v4 มีthis.context.history.push("/path")และthis.props.history.push("/path"). รายละเอียด: จะพุชไปที่ History ใน …

116 reactjs  redux  react-router 

ฉันรู้ว่า Redux เป็น "การนำไปใช้งาน" ที่ดีกว่าของ Flux หรือดีกว่าที่บอกว่าเป็นการออกแบบใหม่เพื่อลดความซับซ้อนของสิ่งต่างๆ ฉันเคยได้ยินเกี่ยวกับการเขียนโปรแกรมปฏิกิริยา (RxJS) มามากมาย แต่ฉันยังไม่ได้เรียนรู้ คำถามของฉันคือ: มีจุดตัด (อะไรที่เหมือนกัน) ระหว่างเทคโนโลยีทั้งสองนี้หรือไม่? ... หรือแตกต่างกันโดยสิ้นเชิง?

113 javascript  rxjs  redux 

คุณควรใช้this.setState()เมื่อใช้ redux หรือไม่? หรือคุณควรจะส่งการกระทำและอาศัยอุปกรณ์ประกอบฉากอยู่เสมอ?

111 reactjs  flux  redux 

ฉันมีส่วนประกอบที่ฉันสร้างขึ้น: class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { return { playlists: state.playlists } } export …

111 javascript  reactjs  redux 

ปิด . คำถามนี้จะต้องมีมากขึ้นมุ่งเน้น ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เน้นไปที่ปัญหาเดียวโดยแก้ไขโพสต์นี้เท่านั้น ปิดให้บริการใน3 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันยังใหม่กับ React / Redux ฉันใช้มิดเดิลแวร์ของ API ดึงข้อมูลในแอป Redux เพื่อประมวลผล API มันคือ ( redux-api-middleware ) ฉันคิดว่าเป็นวิธีที่ดีในการประมวลผลการดำเนินการ async api แต่ฉันพบบางกรณีที่ไม่สามารถแก้ไขได้ด้วยตัวเอง ดังที่หน้าแรก ( Lifecycle ) กล่าวว่าวงจรการดึงข้อมูล API เริ่มต้นด้วยการส่งการดำเนินการ CALL_API ลงท้ายด้วยการส่งการดำเนินการ FSA ดังนั้นกรณีแรกของฉันแสดง / ซ่อนตัวโหลดล่วงหน้าเมื่อดึง API มิดเดิลแวร์จะส่งการดำเนินการ FSA ที่จุดเริ่มต้นและส่งการดำเนินการ FSA ในตอนท้าย การดำเนินการทั้งสองได้รับโดยตัวลดซึ่งควรดำเนินการประมวลผลข้อมูลตามปกติเท่านั้น ไม่มีการใช้งาน UI ไม่มีการดำเนินการอีกต่อไป …

107 javascript  reactjs  redux 

ฉันมีปัญหาที่การเรนเดอร์สถานะทำให้เกิดปัญหา ui และได้รับการแนะนำให้อัปเดตเฉพาะค่าเฉพาะภายในตัวลดของฉันเพื่อลดจำนวนการแสดงผลบนเพจ นี่คือตัวอย่างของรัฐของฉัน { name: "some name", subtitle: "some subtitle", contents: [ {title: "some title", text: "some text"}, {title: "some other title", text: "some other text"} ] } และฉันกำลังอัปเดตเป็นแบบนี้ case 'SOME_ACTION': return { ...state, contents: action.payload } ที่action.payloadเป็นอาร์เรย์ทั้งหมดที่มีค่าใหม่ แต่ตอนนี้ฉันแค่ต้องอัปเดตข้อความของรายการที่สองในอาร์เรย์เนื้อหาและสิ่งนี้ไม่ได้ผล case 'SOME_ACTION': return { ...state, contents[1].text: action.payload } ที่action.payloadตอนนี้เป็นข้อความที่ฉันต้องการสำหรับการปรับปรุง

107 javascript  reactjs  redux 

ฉันมีองค์ประกอบ React ง่ายๆที่ฉันเชื่อมต่อ (การแมปอาร์เรย์ / สถานะอย่างง่ายทับ) เพื่อไม่ให้อ้างอิงบริบทของร้านค้าฉันต้องการวิธี "จัดส่ง" โดยตรงจากอุปกรณ์ประกอบฉาก ฉันเคยเห็นคนอื่นใช้แนวทางนี้ แต่ไม่สามารถเข้าถึงได้ด้วยเหตุผลบางประการ :) นี่คือเวอร์ชันของการพึ่งพา npm แต่ละรายการที่ฉันใช้อยู่ในปัจจุบัน "react": "0.14.3", "react-redux": "^4.0.0", "react-router": "1.0.1", "redux": "^3.0.4", "redux-thunk": "^1.0.2" นี่คือส่วนประกอบที่มีวิธีการเชื่อมต่อ class Users extends React.Component { render() { const { people } = this.props; return ( <div> <div>{this.props.children}</div> <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: …

107 javascript  reactjs  redux 

ฉันรู้ว่านี่เป็นคำถามพื้นฐาน แต่ฉันไม่มีโชคในการหาคำตอบจากที่อื่น คือstore.dispatchในการซิงโครหรือไม่ตรงกันRedux? ในกรณีที่เป็นแบบอะซิงโครนัสมีความเป็นไปได้ที่จะเพิ่มการเรียกกลับหลังจากการดำเนินการได้รับการเผยแพร่ตามที่เป็นไปได้Reactหรือไม่?

106 javascript  reactjs  redux  single-page-application 

ฉันกำลังพยายามสร้างวิธีการคัดลอกแผนที่แบบเจาะลึกสำหรับโปรเจ็กต์ Redux ของฉันซึ่งจะทำงานกับอ็อบเจ็กต์แทนที่จะเป็นอาร์เรย์ ฉันอ่านว่าใน Redux แต่ละรัฐไม่ควรเปลี่ยนแปลงอะไรในสถานะก่อนหน้านี้ export const mapCopy = (object, callback) => { return Object.keys(object).reduce(function (output, key) { output[key] = callback.call(this, {...object[key]}); return output; }, {}); } มันได้ผล: return mapCopy(state, e => { if (e.id === action.id) { e.title = 'new item'; } return e; }) อย่างไรก็ตามมันไม่ได้คัดลอกรายการภายในอย่างลึกล้ำดังนั้นฉันต้องปรับแต่งเพื่อ: export const …

106 javascript  ecmascript-6  redux  spread-syntax 

ฉันมีตัวลดหนึ่งตัวสำหรับไคลเอนต์อีกตัวหนึ่งสำหรับ AppToolbar และอื่น ๆ ... ตอนนี้สมมติว่าฉันสร้างการดำเนินการดึงข้อมูลเพื่อลบไคลเอนต์และหากล้มเหลวฉันมีโค้ดในตัวลดไคลเอ็นต์ซึ่งควรทำบางอย่าง แต่ฉันต้องการแสดงข้อผิดพลาดส่วนกลางใน AppToolbar ด้วย แต่ไคลเอนต์และตัวลด AppToolbar ไม่แชร์ส่วนเดียวกันของสถานะและฉันไม่สามารถสร้างการดำเนินการใหม่ในตัวลด แล้วฉันจะแสดงข้อผิดพลาดทั่วโลกได้อย่างไร? ขอบคุณ อัปเดต 1: ลืมบอกไปว่าใช้este devstack อัปเดต 2: ฉันทำเครื่องหมายคำตอบของ Eric ว่าถูกต้อง แต่ฉันต้องบอกว่าวิธีแก้ปัญหาที่ฉันใช้ใน este นั้นเหมือนกับการรวมกันของคำตอบของ Eric และ Dan ... คุณต้องหาสิ่งที่เหมาะกับคุณที่สุดในรหัสของคุณ .. .

105 javascript  reactjs  redux 

ในบทที่เกี่ยวกับการออกแบบรูปร่างสถานะเอกสารแนะนำให้เก็บสถานะของคุณไว้ในอ็อบเจ็กต์ที่คีย์ด้วย ID: เก็บทุกเอนทิตีในอ็อบเจ็กต์ที่จัดเก็บโดยมี ID เป็นคีย์และใช้ ID เพื่ออ้างอิงจากเอนทิตีหรือรายการอื่น พวกเขาไปสู่สถานะ คิดว่าสถานะของแอปเป็นฐานข้อมูล ฉันกำลังทำงานเกี่ยวกับรูปร่างสถานะสำหรับรายการตัวกรองซึ่งบางส่วนจะเปิดอยู่ (แสดงในป๊อปอัป) หรือมีตัวเลือกที่เลือกไว้ เมื่อฉันอ่าน "คิดว่าสถานะของแอปเป็นฐานข้อมูล" ฉันคิดว่ามันเป็นการตอบสนอง JSON เนื่องจากจะส่งคืนจาก API (ฐานข้อมูลสนับสนุน) ดังนั้นฉันคิดว่ามันเป็น [{ id: '1', name: 'View', open: false, options: ['10', '11', '12', '13'], selectedOption: ['10'], parent: null, }, { id: '10', name: 'Time & Fees', open: false, options: ['20', '21', '22', …

97 javascript  redux  spread-syntax