React: Merging formData props to Component's state (Redux)

Question

In my Editor Component, I monitor form input changes and save them to the state.

When the form is submitted, the state's formData is dispatched to the store, when the Component reloads, I would like to merge the formData from the props (store) to the state.

I've tried using the spread operator with initialState ordered first, then spreading my prop's formData, and the same with spreading my prop first then setting the initialState

I'm failry new to React + Redux, I just can't quite see what I am doing wrong.

Thanks in advance! - Benjamin

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
        }
    }

EDIT added 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

Props in Initial State is anti-pattern , to put the props in the state, you can use :

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

and to update the state when the component updates, you can use componentdidupdate like :

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

Answer 2

First of all I don't understand why you are doing this approach as this approach isn't good. But as for your requirement, You can do one thing. You can declare componentDidUpdate and inside cDU you can check, if the local state form and redux form is different, you can setState to the new data. Example:

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});
  }
}

This would solve your issue, But I highly recommend to use some other approach.