在react和redux中自动保存表单字段

Question

我有一个父组件,它是一个表单,它通过redux连接到商店:

// FormComponent
export default connect(mapStateToProps, mapDispatchToProps)(FormComponent);

在该表单中,我有一个输入属性列表,它是表单的子组件:

• 表单组件
  • 名字组件
  • 姓氏组件
  • 地址组件

我需要通过在输入失去焦点时传递包含所有属性的JSON对象来进行更新API调用,从而将任何字段中的更改保存到服务器.

API调用将是这样的:

updatePersonInfo({firstname: 'new name', lastname: 'new name', address: 'new address' });

我的想法是将PersonInfo对象作为道具从Form组件传递给所有子组件.每个子组件将从PersonInfoprops 更新一个属性,并使用更新的PersonInfo对象调度UPDATE_PERSONINFO操作.但要做到这一点,我还需要将所有子组件连接到存储:

// FirstNameComponent
export default connect(mapStateToProps, mapDispatchToProps(FirstNameComponent);

// LastNameComponent
export default connect(mapStateToProps, mapDispatchToProps)(LastNameComponent);

// AddressComponent
export default connect(mapStateToProps, mapDispatchToProps)(AddressComponent);

但我认为我们应该避免因为性能原因而使用connect.另外,我不相信我需要4个连接器来调用一个动作.

什么是处理这种情况的最佳选择？

Answer 1

我认为您可以使用 来store.subscribe(listener)比较任何更改并调用 API 来保存数据。https://redux.js.org/api-reference/store#subscribe

我将其用于类似的功能，我将所有商店数据保存在浏览器的本地存储中。

这是我如何使用

    import { loadState, saveState, loadLanguage } from "./common/localStorage";



    class Main extends React.Component {

    ..........

    store.subscribe(() => {
       saveState(store.getState()); // Some DOM api calls.
    });

    ..........

   }

我的 localStorage.js 文件

    export const loadState = () => {
    try {
        const serializedState = localStorage.getItem('state');

        if (serializedState === null) {
            return undefined;
        }

        return JSON.parse(serializedState);

    } catch (err) {
        return undefined;
    }
};

export const saveState = (state) => {
    try {
        const serializedState = JSON.stringify(state);
        localStorage.setItem('state', serializedState);
    } catch (err) {
        // die
    }
};


export const saveLanguage = (code) => {
    try {
        localStorage.setItem('languageCode', code);
    } catch (err) {
        // die
    }
};

export const loadLanguage = () => {
    try {
        const languageCode = localStorage.getItem('languageCode');

        if (languageCode === null) {
            return "pt-br";
        }

        return languageCode;

    } catch (err) {
        return "pt-br";
    }
};