Реакция: Слияние formData поддерживает состояние Компонента (Redux)

Question

В моем компоненте редактора я отслеживаю изменения ввода формы и сохраняю их в состояние.

Когда форма отправляется, formData состояния отправляется в хранилище, когда компонент перезагружается, я хотел бы объединить formData из реквизита (хранилища) в состояние.

Я пытался сначала использовать оператор распространения с упорядоченным initialState, затем распространять formData моего проп, и то же самое с первым распространением проп, затем установить initialState

Я плохо знаком с React + Redux, я просто не могу понять, что я делаю неправильно.

Заранее спасибо! - Бенджамин

const initialState =  {
    articles: [],

    formData: {
        articleId: null,
        title: '',
        body: '',
        status: editorTypes.STATUS_DRAFT
    },

    editMode: false,
}

const TITLE = editorTypes.TITLE_DEFAULT
const TYPE = editorTypes.TYPE_ARTICLE

class Editor extends React.Component {
    constructor(props) {
        super(props)
        const { title, body, status } = this.props.formData

        this.state = {
            title: TITLE,
            formData: {
                title,
                body,
                status,
                TYPE
            },
            ...this.props.initialState
        }
    }

РЕДАКТИРОВАТЬ добавлено mapStateToProps

const mapStateToProps = state => {
    const { list, refreshList, editMode, formData } = state.dashboard.articles

    return {
        list,
        refreshList,
        editMode,
        formData
    }
}


export default connect(mapStateToProps)(EditorWrapper(Editor))

Answer 1

Прежде всего, я не понимаю, почему вы используете этот подход, так как этот подход не очень хорош. Но что касается вашего требования, вы можете сделать одну вещь. Вы можете объявить componentDidUpdate и внутри cDU вы можете проверить, если форма локального состояния и форма с избыточностью отличаются, вы можете setState к новым данным. Пример:

componentDidUpdate(prevProps, prevState) {
// now you can check your props and state
 if(prevState.formData.articleId === this.props.formData.articleId) {
   // here i only compared your articleId, You can check others yourself or use 
   // Lodash to check your object equity.
   // for example, with loash console.log(_.isEqual(prevState.formData, 
   // this.props.formData));
   this.setState({ formData: this.props.formData});
  }
}

Это решит вашу проблему, но я настоятельно рекомендую использовать другой подход.

Answer 2

Реквизит в исходном состоянии является анти-паттерном , для перевода реквизита в состояние вы можете использовать:

componentDidMount(){
    this.setState(prevState => ({
        ...prevState,
        ...this.props.initialState
    }));
}

и для обновления state при обновлении компонента можно использовать componentdidupdate , например:

componentdidupdate(prevProps){
    if(prevProps.initialState !== this.props.initialState){
        this.setState(prevState => ({
            ...prevState,
            formData : {
                ...this.props.formData
            }           
        }));
    }
}