반응 구성 요소 인 ReorderComponent가 있는데 이는 redux 저장소에서 전달 된 목록을 렌더링합니다. 'Reorder reorder'의 Reorder 구성 요소에 목록을 래핑했으며 사용자가 목록의 순서를 변경하면 매장을 업데이트하는 소품으로 전달되는 dipatch 함수가 있습니다.상태 비 저장 구성 요소가 작업 후 새 소품을받지 못함
이 단계는 저장소 업데이트를 볼 수 있고 주 컨테이너가 재정렬 된 목록과 함께 새 상태를 수신하므로 정상적으로 완료됩니다.
그러나 ReorderComponent는 상태가 변경 될 때 소품을 업데이트하지 않습니다.
-RequestContainer.js
- ReorderComponent
소품
-connects의 상태지도 dipsatch 상태를 수신한다 : -
구조는 다음과 같다 ReorderComponent.js
- 목록을 렌더링하고 재주문 이벤트를 처리하기 위해 props를받는 무단 구성 요소. 우리가 있기 때문에, 그 상태 변경 후, 벙어리 구성 요소의 소품을 업데이트하지 않았습니다 볼 수있는이 이미지에
import React from 'react'
import CitiesListReorder from '../components/CitiesListReorder'
import { connect } from 'react-redux'
import { setCity, setOrder, removeCity, setNumDays, setPreferences } from '../actions'
const mapStateToProps = state => {
console.log('passing as props:\ncities', state[Object.keys(state).length - 1].cities)
return {
cities: state[Object.keys(state).length - 1].cities,
fID: Object.keys(state).length -1,
preferences: state[Object.keys(state).length - 1].preferences,
}
}
const mapDispatchToProps = dispatch => {
return {
onRemoveClick: (fID, index) => {
dispatch(removeCity(fID, index))
},
onEditClick: (fID, value, index) => {
dispatch(setCity(fID, value, index))
},
onSetNumDays: (fID, index, days) => {
dispatch(setNumDays(fID, index, days))
},
onSetPrefences: (fID, pref_type, info) => {
dispatch(setPreferences(fID, pref_type, info))
},
onReOrder: (fID, prevIndex, nextIndex) => {
dispatch(setOrder(fID, prevIndex, nextIndex))
}
}
}
const RequestContainer = connect(
mapStateToProps,
mapDispatchToProps
)(CitiesListReorder)
export default RequestContainer
import React from 'react'
import PropTypes from 'prop-types'
import City from '../components/City'
import removeCity from '../actions'
import Preferences from './Preferences'
import Reorder, { reorder, reorderImmutable, reorderFromTo, reorderFromToImmutable } from 'react-reorder';
const CitiesListReorder = ({ fID, cities, preferences, onRemoveClick,
onEditClick, onSetNumDays, onSetPrefences, onReOrder }) => {
console.log('inside cities list reorder')
return(
<div>
<Reorder
reorderId="my-list"
reorderGroup="reorder-group"
component="ul"
placeholderClassName="placeholder"
draggedClassName="dragged"
lock="horizontal"
holdTime={100}
onReorder={ (event, prevIndex, nextIndex) => {onReOrder(fID, prevIndex, nextIndex)} }
autoScroll={true}
disabled={false}
disableContextMenus={true}
placeholder={
<div className="custom-placeholder" />
}
>
{
cities.map((city, index) => (
<li key = {'li' + index} >
<City
key = {'city' + index}
cityIndex = {index}
city = {city}
flightID = {fID}
onRemoveClick = { onRemoveClick }
onEditClick = { onEditClick }
/>
</li>
))
}
</Reorder>
{cities.length > 1
?
<Preferences
fID = { fID }
numCities = { cities.length }
preferences = { preferences }
onSetPrefences = { onSetPrefences }
/>
:
null
}
</div>
)
}
CitiesListReorder.propTypes = {
fID: PropTypes.number.isRequired,
cities: PropTypes.array.isRequired,
preferences: PropTypes.object.isRequired,
onRemoveClick: PropTypes.func.isRequired,
onEditClick: PropTypes.func.isRequired,
onSetNumDays: PropTypes.func.isRequired,
onSetPrefences: PropTypes.func.isRequired,
onReOrder: PropTypes.func.isRequired,
}
export default CitiesListReorder
아무것도 기록하지 않았다.
감속기 :
감속기를 보여 줄 수 있습니까? Redux FAQ에 따르면 99 %의 시간 [ "내 구성 요소가 업데이트되지 않았습니다"는 주 (state) 변이로 인한 것입니다] (http : //redux.js.org/docs/faq/ReactRedux.html # react-not-rerendering). – markerikson
또한, 참고로 : 연결에 "객체 속기"를 사용하여 작업 발송을 단순화 할 수 있습니다. '{onRemoveClick : removeCity, onEditClick : setCity} '와 같이 객체를 두 번째 인수로 전달하십시오. – markerikson
각 감속기 기능을 추가했습니다. @markerikson –