在Redux中保留旧表单样式的一种解决方法是将表单样式保存在Redux store中,并在重新渲染表单时从store中获取样式。
以下是一个示例代码,展示如何在Redux中保存和更新表单样式:
// actions.js
export const saveFormStyle = (style) => {
return {
type: 'SAVE_FORM_STYLE',
payload: style
}
}
// reducer.js
const initialState = {
formStyle: null
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'SAVE_FORM_STYLE':
return {
...state,
formStyle: action.payload
}
default:
return state
}
}
export default reducer
// FormComponent.js
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { saveFormStyle } from './actions'
const FormComponent = ({ formStyle, saveFormStyle }) => {
// 保存表单样式到Redux store
useEffect(() => {
saveFormStyle(getFormStyle())
}, [])
// 获取表单样式从Redux store
const getFormStyle = () => {
// 返回旧表单样式的逻辑
}
return (
)
}
const mapStateToProps = (state) => {
return {
formStyle: state.formStyle
}
}
const mapDispatchToProps = (dispatch) => {
return {
saveFormStyle: (style) => dispatch(saveFormStyle(style))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FormComponent)
在上述代码中,我们在表单组件的useEffect
钩子中保存表单样式到Redux store,并在表单的style
属性中使用从store中获取的样式。这样,在重新渲染表单时,Redux store中的旧样式将会被保留。
请注意,在上述代码中的getFormStyle
函数中,你需要根据你的需求来获取旧表单样式的逻辑。这可能涉及从API中获取样式数据,或者从其他React组件中获取样式等等。
上一篇:保留React组件状态在卸载时