javascript - 当数据处于 redux 时使用表单的本地状态

Question

Use React for ephemeral state that doesn’t matter to the app globally and doesn’t mutate in complex ways. For example, a toggle in some UI element, a form input state. Use Redux for state that matters globally or is mutated in complex ways. For example, cached users, or a post draft.

我的 redux 状态仅代表已保存到我的后端数据库的内容。

对于我的用例，应用程序的任何其他部分不需要了解处于添加/编辑状态的记录。

但是，我与 API 的所有通信都是通过 redux-thunk 完成的。我发现，将数据从 redux 获取到本地状态进行编辑是很棘手的。

我尝试使用的模式:

const Container = () => {
    // use redux thunk to fetch from API
    useEffect(() => {
      dispatch(fetchThing(id));
    }, [dispatch, id]);

    // get from redux store
    const reduxThing = useSelector(getThing);

    const save = thing => {
      dispatch(saveThing(thing));
    };

    return (
      {!fetching && 
       <ThingForm 
        defaults={reduxThing} 
        submit={save}
      />}
    );
};

const ThingForm = ({defaults, submit}) => {
    const [values, setValues] = useState({ propA: '', propB: '', ...defaults});
    const handleChange = { /*standard handleChange code here*/ };

    return (
        <form onSubmit={() => submit(values)}>
          <input type="text" name="propA" value={values.propA} onChange={handleChange} />
          <input type="text" name="propB" value={values.propB} onChange={handleChange} />
        </form>
    );
};

我的理解是，ThingForm 是根据“获取”来卸载/安装的。然而，无论是否填充默认值，这都是一个竞争条件。有时他们这样做，有时他们不这样做。

很明显这不是一个很好的模式。

是否存在将数据从 redux 移动到本地状态以在表单中进行编辑的既定模式？

或者我应该将表单数据放入 redux 中？ (我不知道这是否会更容易)。

---

编辑:我认为这本质上是我正在战斗的:https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html 但没有任何建议真正明确适合。我严格使用钩子(Hook)。我可以在 Prop 更改时使用 useEffect 进行覆盖，但看起来有点困惑。

Answer 1

编辑:

const Container = () => {
    // use redux thunk to fetch from API
    useEffect(() => {
      dispatch(fetchThing(id));
    }, [dispatch, id]);

    // get from redux store
    const reduxThing = useSelector(getThing);

    const save = thing => {
      dispatch(saveThing(thing));
    };

    return (
      {!fetching && 
       <ThingForm 
        defaults={reduxThing} 
        submit={save}
      />}
    );
};

const ThingForm = ({defaults, submit}) => {
    const [values, setValues] = useState({ propA: '', propB: '', ...defaults});
    const handleChange = { /*standard handleChange code here*/ };


   useEffect(() => {
     setValues({...values, ...defaults})
   }, [defaults]);

    const submitValues = (e) => {
      e.preventDefault();
      submit(values)
    }

    return (
        <form onSubmit={submitValues}>
          <input type="text" name="propA" value={values.propA} onChange={handleChange} />
          <input type="text" name="propB" value={values.propB} onChange={handleChange} />
        </form>
    );
};

---

你正在做的事情是正确的，没有理由把表单数据放在redux存储中。正如您所说，“应用程序的任何其他部分不需要了解处于添加/编辑状态的记录” 这是正确的。

您遇到的唯一问题是:

{!fetching && 
       <ThingForm 
        defaults={reduxThing} 
        submit={save}
      />}

假设每次调度时fetching都是true:

您应该使用覆盖页面的微调器，而不是尝试隐藏组件(本质上是卸载)？

我不知道您的其余代码是否可以评论更好的方法。

您也不必将调度添加到依赖项数组

useEffect(() => {
      dispatch(fetchThing(id));
    }, [id]);

来自 react 文档:

React guarantees that dispatch function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.