reactjs 如何在React中使用带有形状缩减器的静态模型？

yqlxgs2m 于 2023-01-30 发布在 React

关注(0)|答案(1)|浏览(106)

主要的问题是开发人员可以向标准形式的reducers状态添加任何他们想要的东西，它不是静态的。这导致了不同开发人员之间更难理解的状态，基本上是一个隐藏的模型。
我最初创建了一个键/值JS对象来表示表单的数据模型。然后我意识到，当reducer返回一个包含任何内容的新状态时，只能通过state prop将其发送到reducer。没有任何安全措施可以阻止开发人员返回{null}或其他疯狂的事情。
如果开发者试图向Reducer添加一个没有在模型中定义和初始化的状态变量，我希望Reducer失败并发出控制台警告。我觉得这对类来说肯定是可能的，但对函数和钩子我不确定。

export const FormModel = {
  submit: false,
}

export default function FormReducer(state = FormModel, action) {
  switch (action.type) {
    case 'submit':
      return { ...state, submit:  action.payload}
    default:
      return state
  }
}

const Form = ({}) => {
  return (
    <form>{/*TODO*/}</form>
  )
}

export default Form

Form.propTypes = {
  //TODO
}

奖励积分：集成ajax的最佳方法。

reactjs

来源：https://stackoverflow.com/questions/75251101/how-can-i-use-a-static-model-with-a-form-reducer-in-react

1条答案

按热度按时间

fae0ux8s1#

在这里我想谈一件事，这可能是类似于你正在寻找的。
我使用react和typescript以及eslint创建了我的应用程序，首先，我定义了一个名为IProfileState的模型，然后扩展为initialState。
就像这样：

interface IProfileState {
    name: string
    age: number
}

interface IState {
    profile: IProfileState
}

const initialState: IState = {
    profile: {
        name: '',
        age: 2
    }
};

我把IProfileState接口传递给PayloadAction，这是redux操作的类型，如下所示。

export const uiSlice = createSlice({
    name: 'ui',
    initialState,
    reducers: {
        setUserProfile: (state, action: PayloadAction<IProfileState>) => {
            state.profile = action.payload;
        }
    }
});

当我试图输入错误的东西或者我没有在IProfileState上定义它时。
我会得到这样的错误：

TS2345: Argument of type '{ name: string; age: number; gender: string; }' is not assignable to parameter of type 'IProfileState'.
  Object literal may only specify known properties, and 'gender' does not exist in type 'IProfileState'.
    12 |             name: 'doe',
    13 |             age: 10,
  > 14 |             gender: 'male'
       |             ^^^^^^^^^^
    15 |         }));
    16 |     };

也许你也可以实现这个。完整的文档在这里https://react-redux.js.org/using-react-redux/usage-with-TypeScript

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 如何在React中使用带有形状缩减器的静态模型？

1条答案

相关问题

热门标签

最新问答