Reducx - 스프레드 연산자를 사용하여 깊이 중첩된 스토어 소품 업데이트
리액트+리플렉스를 사용하여 비교적 큰 웹 앱을 만들고 있는데, 내 가게를 상대하는 것이 정말 혼란스러워.
저장소에 중첩된 속성을 업데이트하는 데 문제가 발생하여 다음과 같은 작업을 수행해야 함을 나타내는 Redex 문서의 Imable Update Patterns 섹션을 찾았어.
function updateVeryNestedField(state, action) {
return {
....state,
first : {
...state.first,
second : {
...state.first.second,
[action.someId] : {
...state.first.second[action.someId],
fourth : action.someValue
}
}
}
}
}
그리고 나는 그렇게 했고, 그 결과 내 환원기의 일부분은 이렇게 생겼다.
.
.
.
case "CHANGE_RANGED_INPUT": {
return {
...state,
searchPanel: {
...state.searchPanel,
[action.payload.category]: {
...state.searchPanel[action.payload.category],
rangedInputs: {
...state.searchPanel[action.payload.category].rangedInputs,
[action.payload.type]: {
...state.searchPanel[action.payload.category].rangedInputs[action.payload.type],
[action.payload.key]: {
...state.searchPanel[action.payload.category].rangedInputs[action.payload.type][action.payload.key],
value: action.payload.value
}
}
},
}
},
}
}
.
.
.
내 코드가 점점 더 혼란스러워지고 있다는 것에 동의하는 것 같아.내 질문은 리듀렉스 문서들이 권고한 방법의 성과에 관한 것이 아니라(나의 경우 거의 매초마다 파견되는 행동을 위해 많은 일을 하는 것처럼 느껴지지만) 그리고 나는 그것이 최선의 방법이라고 생각한다.
내 질문은 내 코드의 가독성에 관한 것이다.환원기를 더 깨끗하게 만들 수 있는 방법이 있을까?
사실 나는 이 라이브러리가 제공하는 모든 기능이 필요해서가 아니라 하나의 기능만을 사용하기 위해 나의 거대한 형태에 react-remensx-form을 사용하고 있다. 이 라이브러리는 내가 많은 중첩된 것을 가진 거대한 형태 모델을 만들 수 있도록 해주고 내가 해야 할 일은 그것의 모델 경로를 입력에 추가해서 그것의 사전 정의된 변경 이벤트와 rela를 얻는 것이다.테드는 업데이트 가치.
이 도서관은 스프레드 오퍼레이터를 후드 아래에 두고 그렇게 하고 있는가?
일부 입력에 인덱스를 추가하고 입력 값이 변경될 때 해당 인덱스로 스토어의 관련 값을 업데이트할 수 있는 다른 방법이 있는가?
환원된 문서로 쓸 수 있는 수십 개의 유틸리티를 찾았어!불변 업데이트 유틸리티
그리고 난 점프로포즈-불가분하다고 생각해.
'Programing' 카테고리의 다른 글
구성 요소에서 "vuetify" 전환을 사용하는 방법 (0) | 2022.04.07 |
---|---|
react-router-dom v6으로 404 페이지를 작성하는 방법 (0) | 2022.04.07 |
대응: TypeError: 정의되지 않았거나 null을 개체로 변환할 수 없음 (0) | 2022.04.07 |
활자를 사용하여 여러 개의 반환 유형을 지정하는 방법 (0) | 2022.04.07 |
iPad에서 네이티브 대응 - 오류 - 개발 서버에 연결할 수 없음 (0) | 2022.04.07 |