Crosstab and Fields problem?

[stbatuhan]

i'm working on a project based on redux. I have pages for adding new applications, roles, companies etc. And they have some fields inside. I'm using redux-persist for persistence on localStorage. Also using crosstabSync for multiple tab store sync.

Now the problem is that sync system mess with rehydration. When i click to add new company button and arrive to:
http://localhost:3000/ui/company/-1
persist/Rehydrate starts to action for multiple/endless time. My application page code:

import React from 'react';
import { connect } from 'react-redux';
import BaseContainer from '../../shared/BaseContainer';
import { Form, Input, Col, Checkbox, Card, Spin, Row } from 'antd';
import { loadCompany, unloadCompany, saveCompany, newCompany } from './CompanyActions';
import { hasPermission } from '../../../utils/Authentication';
const FormItem = Form.Item;

class CompanyForm extends BaseContainer {

componentDidMount() {
    if (this.props.match.params.id === "-1") {
        this.props.dispatch(newCompany());
    } else {
        this.props.dispatch(loadCompany(this.props.match.params.id));
    }
}

componentWillUnmount() {
    this.props.dispatch(unloadCompany());
}

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
        if (!err) {
            values.id = this.props.company.id;
            this.props.dispatch(saveCompany(values));
        }
    });
}

render() {
    if (this.props.loading === undefined || this.props.loading) {
        return <div className="centerOfPage"><Spin size="large"/></div>
    }
    const { getFieldDecorator } = this.props.form;
    return <span>
        <div className="mt2"/>
        <Card className="mt1" title={this.getFormTitle(this.props.company.id, this.props.company.name, hasPermission("companies:save"))}>
          <Form layout="vertical">
            <Row gutter={16}>
            <Col xs={24} sm={12} md={12}  lg={6} xl={6} className="gutter-row">
                <FormItem
                    label="Name"
                    hasFeedback
                    >
                    {getFieldDecorator('name', {
                        rules: [
                            {required: true, message: 'Please Enter Company Name'}],
                    })(
                        <Input placeholder="Name"/>
                    )}
                </FormItem>
            </Col>
            <Col xs={24} sm={12} md={12}  lg={6} xl={6} className="gutter-row">
                <FormItem
                    label="Description"
                    hasFeedback
                    >
                    {getFieldDecorator('description', {
                        rules: [
                            {required: true, message: 'Please Enter Description'}],
                    })(
                        <Input placeholder="Description"/>
                    )}
                </FormItem>
            </Col>
            <Col xs={24} sm={12} md={12} lg={6} xl={6} className="gutter-row">
            <FormItem
                label="Enabled"
                >
                {getFieldDecorator('enabled', {
                    valuePropName: 'checked'
                })(
                    <Checkbox/>
                )}
            </FormItem>
        </Col>
        </Row>
        </Form>
        </Card>
    </span>
}

}

const mapPropsToFields=(props)=>{
    let company = props.company;
    if (company === undefined) {
        company = {};
    }
return {
    description:  { value: company.description },
    name: { value : company.name},
    enabled : { value : company.enabled },
    id : { value : company.id }
    };
};

const mapStateToProps = (state) => ({
    company: state.companies.company,
    loading : state.companies.loading
});
const Company = Form.create({mapPropsToFields})(CompanyForm);

export default connect(
  mapStateToProps
)(Company);

Loop cause mainly "mapPropsToFields" part. It returns allways in that.

So i tried adding

   const mapPropsToFields=(props)=>{
 if ( filledValues ) {
   let company = props.company;
   if (company === undefined) {
       company = {};
   } return {...

Also i'm changing:

  componentDidMount() {
    if (this.props.match.params.id === "-1") {
        this.props.dispatch(newCompany());
      filledValues = true;
    } else {
        this.props.dispatch(loadCompany(this.props.match.params.id));
      filledValues = true;
    }
}

So after dispatch part completed that state starts to action right. But why that happens and is that the right way to do?

If necessary this is the reducer part of company:

case CompanyActions.NEW_COMPANY :
  return Object.assign({}, state, {
    company: {},
    loading : false
  });

And also i have to edit bec it's not working when you try to edit company. Fields empty. And when i refresh page on add company i found that crosstabSync restarts itself.

@rt2zz Do you have any idea?

[rt2zz]

I have not used this lib much, but some possible ideas:

1. would putting the sync on a throttle help?
2. is there a way to avoid circular updates?

I dont know the answers, but if you figure something out please post back