Javascript 如何使用React、Redux和Redux saga管理多制表符表单？

我在一家CRM公司工作，负责React、Redux和Redux Saga。 我正在寻找一种好的/可扩展的方法来更新和保存具有深层数据结构的数据，以维护良好的UI

假设我想要编辑一个基本的产品模型：

state : {
title: "Test title",
description: "Test title",
name: "Test title",
variants: [],
gallery: []

}

UI有一个父组件，包含3个子选项卡，其中包含用于更新的表单和输入：描述（标题、描述、名称）、变体和库

submit按钮位于父组件内部，因此用户可以保存产品，而不管它位于哪个选项卡中

问题是：当用户按“保存”时，将每个子选项卡的状态传递给父选项卡的最佳方式是什么？在启动saveapi之前，我们必须等待所有状态都传递给父级。怎么做

我试图完成将所有子选项卡连接到产品商店的任务，当用户按下保存按钮时，我将向产品商店发送一个操作，该操作将触发所有连接的子选项卡的“componentDidUpdate”方法。在每个children“componentdiddupdate”方法中，我都会将children的当前状态放在产品存储中的等效密钥中，然后，我将启动saveProduct saga。这似乎是可行的，但是是异步的，因此saveProduct传奇在所有状态都存储在产品存储区之前被触发

// ProductEdit.js

//Parent component example

@connect(({ product }) => ({ product }))
class ProductEdit extends React.Component {

    onSubmit = e => {
        e.preventDefault()
        const { dispatch, product } = this.props

        //All sub components will listen for this action, 
        //when launched all states have to be put into the store
        dispatch({
            type: 'product/STATE_TO_STORE_ACTION',
            payload: {
                action: 'state_to_store'
            }
        });

    }

    render() {

        <div>
            <Tabs defaultActiveKey="Descriptions">
                <TabPane
                    tab="Descriptions"
                    key="Descriptions"
                >
                    <DescriptionForm />
                </TabPane>
                <TabPane
                    tab="Variants"
                    key="Product Variants"
                >
                    <VariantsForm />
                </TabPane>
                <TabPane
                    tab="Gallery"
                    key="Gallery"
                >
                    <GalleryForm />
                </TabPane>
            </Tabs>

            <Button onClick={this.onSubmit}>Save</Button>

        </div>
    }
}

//Children component 1 example
@connect(({ product }) => ({ product }))
class DescriptionForm extends React.Component {

    state = {
        title: "",
        description: "",
        name: ""
    }

    componentDidUpdate(prevProps, prevState) {
        //Get the product store from props
        const { product } = this.props

        if (product.action == 'state_to_store')

            dispatch({
                type: 'product/SET_STATE',
                payload: {
                    action: 'state_to_store_updated',
                    item: {

                        title: this.state.title,
                        description: this.state.description,
                        name: this.state.name,
                    }
                }
            });
    }

    render() {
        /*...*/
    }
}

//Children component 2 example
@connect(({ product }) => ({ product }))
class VariantsForm extends React.Component {

    state = {
        variants: []
    }

    componentDidUpdate(prevProps, prevState) {
        //Get the product store from props
        const { product } = this.props

        if (product.action == 'state_to_store')

            dispatch({
                type: 'product/SET_STATE',
                payload: {
                    action: 'state_to_store_updated',
                    item: {
                        variants: this.state.variants
                    }
                }
            });
    }

    render() {
        /*...*/
    }
}

/* ...AND SO ON... */

//ProductEdit.js
//父组件示例
@connect（（{product}）=>（{product}））
类ProductEdit扩展了React.Component{
onSubmit=e=>{
e、 预防默认值（）
const{dispatch，product}=this.props
//所有子组件都将侦听此操作，
//启动时，所有状态都必须放入存储
派遣({
键入：“产品/状态到存储操作”，
有效载荷：{
操作：'将\u状态设置为\u存储'
}
});
}
render（）{
拯救
}
}
//子组件1示例
@connect（（{product}）=>（{product}））
类描述表单扩展了React.Component{
状态={
标题：“，
说明：“，
姓名：“
}
componentDidUpdate（prevProps、prevState）{
//从道具获取产品商店
const{product}=this.props
if（product.action=='state\u to\u store'）
派遣({
类型：“产品/设置状态”，
有效载荷：{
操作：“状态到存储更新”，
项目：{
标题：this.state.title，
description:this.state.description，
名称：this.state.name，
}
}
});
}
render（）{
/*...*/
}
}
//儿童组件2示例
@connect（（{product}）=>（{product}））
类VariantsForm扩展React.Component{
状态={
变体：[]
}
componentDidUpdate（prevProps、prevState）{
//从道具获取产品商店
const{product}=this.props
if（product.action=='state\u to\u store'）
派遣({
类型：“产品/设置状态”，
有效载荷：{
操作：“状态到存储更新”，
项目：{
变体：this.state.variants
}
}
});
}
render（）{
/*...*/
}
}
/*……等等*/