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

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

189 javascript  flux  redux  code-splitting 

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

186 javascript  reactjs  redux  react-redux  react-context 

ฉันต้องการคงบางส่วนของแผนผังสถานะของฉันไปยัง localStorage สถานที่ที่เหมาะสมที่จะทำคืออะไร? ลดหรือการกระทำ?

167 javascript  redux  local-storage  state 

มีวิธีการที่เป็นระบบในการดีบักสิ่งที่ทำให้ส่วนประกอบแสดงผลซ้ำใน React หรือไม่ ฉันใส่ console.log แบบง่าย () เพื่อดูจำนวนครั้งที่มันแสดงผล แต่ฉันมีปัญหาในการหาสิ่งที่ทำให้องค์ประกอบในการแสดงหลายครั้งเช่น (4 ครั้ง) ในกรณีของฉัน มีเครื่องมือที่มีอยู่ซึ่งแสดงไทม์ไลน์และ / หรือส่วนประกอบของต้นไม้ทั้งหมดที่แสดงและการสั่งซื้อหรือไม่?

156 reactjs  redux 

นี่คือตัวอย่างจากหน้าแอปพลิเคชัน Google Adsense หน้าจอโหลดปรากฏขึ้นก่อนหน้าหลักแสดงให้เห็นหลังจาก ฉันไม่ทราบวิธีการทำสิ่งเดียวกันกับ React เพราะถ้าฉันทำการโหลดหน้าจอที่เรนเดอร์ด้วยองค์ประกอบ React มันจะไม่แสดงในขณะที่หน้ากำลังโหลดเพราะมันต้องรอ DOM ที่เรนเดอร์มาก่อน อัปเดต : ฉันทำตัวอย่างของวิธีการของฉันโดยใส่ตัวโหลดหน้าจอindex.htmlและลบออกในcomponentDidMount()วิธีวงจรชีวิตของReact ตัวอย่างและการตอบสนองในการโหลดหน้าจอ

150 reactjs  asynchronous  redux 

ฉันใช้ Redux ในตัวลดของฉันฉันกำลังพยายามลบคุณสมบัติออกจากวัตถุเช่นนี้: const state = { a: '1', b: '2', c: { x: '42', y: '43' }, } และฉันต้องการมีบางอย่างเช่นนี้โดยไม่ต้องเปลี่ยนสถานะเดิม: const newState = { a: '1', b: '2', c: { x: '42', }, } ฉันเหนื่อย: let newState = Object.assign({}, state); delete newState.c.y แต่ด้วยเหตุผลบางอย่างมันจะลบคุณสมบัติจากทั้งสองรัฐ ช่วยฉันทำอย่างนั้นได้ไหม

145 javascript  immutability  redux 

รหัสเต็มได้ที่นี่: https://gist.github.com/js08/0ec3d70dfda76d7e9fb4 สวัสดี ฉันมีแอปพลิเคชั่นที่จะแสดงเทมเพลตที่แตกต่างกันสำหรับเดสก์ท็อปและมือถือตามสภาพแวดล้อมการสร้าง ฉันสามารถพัฒนามันได้โดยที่ฉันต้องการซ่อนเมนูนำทางสำหรับเทมเพลตมือถือของฉัน ตอนนี้ฉันสามารถเขียนกรณีทดสอบหนึ่งกรณีซึ่งดึงค่าทั้งหมดผ่าน proptypes และแสดงอย่างถูกต้อง แต่ไม่แน่ใจว่าจะเขียนกรณีทดสอบหน่วยได้อย่างไรเมื่ออุปกรณ์เคลื่อนที่ไม่ควรแสดงองค์ประกอบการนำทาง ฉันพยายาม แต่ฉันพบข้อผิดพลาด ... คุณสามารถบอกฉันได้ว่าจะแก้ไขได้อย่างไร รหัสด้านล่าง กรณีทดสอบ import {expect} from 'chai'; import React from 'react'; import TestUtils from 'react-addons-test-utils'; import {SportsTopPortion} from '../../../src/components/sports-top-portion/sports-top-portion.jsx'; require('../../test-utils/dom'); describe('"sports-top-portion" Unit Tests', function() { let shallowRenderer = TestUtils.createRenderer(); let sportsContentContainerLayout ='mobile'; let sportsContentContainerProfile = {'exists': 'hasSidebar'}; let …

142 reactjs  mocha  redux 

ฉันจะเพิ่มองค์ประกอบใน 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 

แทนที่จะเขียนส่วนประกอบของฉันภายในคลาสฉันต้องการใช้ไวยากรณ์ของฟังก์ชันแทน ฉันจะแทนที่วิธีcomponentDidMount, componentWillMountภายในชิ้นส่วนฟังก์ชั่น? เป็นไปได้หรือไม่? const grid = (props) => { console.log(props); let {skuRules} = props; const componentDidMount = () => { if(!props.fetched) { props.fetchRules(); } console.log('mount it!'); }; return( <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}> <Box title="Sku Promotion"> <ActionButtons buttons={actionButtons} /> <SkuRuleGrid data={skuRules.payload} fetch={props.fetchSkuRules} /> </Box> </Content> ) }

136 reactjs  redux 

อะไรคือความแตกต่างระหว่างส่วนประกอบและคอนเทนเนอร์ใน react redux?

135 javascript  reactjs  redux 

ฉันได้ใช้Redux-Saga รหัสที่เขียนด้วยเหตุผลนั้นง่ายมากยกเว้นฟังก์ชั่นตัวสร้าง JS ทำให้หัวของฉันสับสนเป็นครั้งคราว จากความเข้าใจของฉันRedux-Observableสามารถทำงานที่คล้ายกันซึ่งจัดการกับผลข้างเคียง แต่ไม่ต้องใช้ฟังก์ชันเครื่องกำเนิดไฟฟ้า อย่างไรก็ตามเอกสารจาก Redux-Observable ไม่ได้ให้ความเห็นมากมายว่าเหตุใดจึงเหนือกว่า Redux-Saga ฉันต้องการทราบว่าการไม่ใช้ฟังก์ชันเครื่องกำเนิดไฟฟ้าเป็นประโยชน์เพียงอย่างเดียวของการใช้ Redux-Observable หรือไม่ และอะไรคือข้อเสีย gotcha หรือการประนีประนอมจากการใช้ Redux-Observable แทน Redux-Saga? ขอบคุณล่วงหน้า.

133 javascript  redux  reactive-programming  redux-saga  redux-observable 

ฉันมีแอปพลิเคชัน react / redux ที่ดึงโทเค็นจากเซิร์ฟเวอร์ api หลังจากผู้ใช้ตรวจสอบสิทธิ์แล้วฉันต้องการให้คำขอ axios ทั้งหมดมีโทเค็นนั้นเป็นส่วนหัวการอนุญาตโดยไม่ต้องแนบด้วยตนเองกับทุกคำขอในการดำเนินการ ฉันค่อนข้างใหม่ในการตอบสนอง / redux และไม่แน่ใจในแนวทางที่ดีที่สุดและฉันไม่พบเพลงที่มีคุณภาพใด ๆ ใน Google นี่คือการตั้งค่า redux ของฉัน: // actions.js import axios from 'axios'; export function loginUser(props) { const url = `https://api.mydomain.com/login/`; const { email, password } = props; const request = axios.post(url, { email, password }); return { …

133 reactjs  redux  axios 

ฉันมีฟอร์มหนึ่งที่ใช้ในการสร้างอ่านอัปเดตและลบ ฉันสร้างส่วนประกอบ 3 ชิ้นในรูปแบบเดียวกัน แต่ฉันส่งอุปกรณ์ประกอบฉากต่าง ๆ ให้พวกเขา ฉันได้ CreateForm.js, ViewForm.js (อ่านอย่างเดียวพร้อมปุ่มลบ) และ UpdateForm.js ฉันเคยทำงานกับ PHP ดังนั้นฉันจึงทำสิ่งเหล่านี้ในรูปแบบเดียวเสมอ ฉันใช้ React และ Redux เพื่อจัดการร้านค้า เมื่อฉันอยู่ในองค์ประกอบ CreateForm ฉันจะส่งไปยังส่วนประกอบย่อยของฉันcreateForm={true}เพื่อประกอบฉากนี้เพื่อไม่เติมอินพุตด้วยค่าและไม่ปิดใช้งาน ในองค์ประกอบ ViewForm ของฉันฉันผ่านอุปกรณ์ประกอบฉากreadonly="readonly"นี้ และฉันมีปัญหาอีกอย่างหนึ่งกับ textarea ซึ่งเต็มไปด้วยคุณค่าและไม่สามารถอัปเดตได้ ทำปฏิกิริยา textarea ที่มีค่าเป็นแบบอ่านอย่างเดียว แต่ต้องมีการอัพเดท โครงสร้างที่ดีที่สุดในการมีองค์ประกอบเดียวเท่านั้นที่จัดการสถานะที่แตกต่างกันของแบบฟอร์มเหล่านี้คืออะไร? คุณมีคำแนะนำแบบฝึกหัดวิดีโอตัวอย่างเพื่อแบ่งปันหรือไม่?

128 javascript  reactjs  crud  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