Javascript 如何在状态更新之前检查操作负载?

Javascript 如何在状态更新之前检查操作负载?,javascript,redux,react-redux,Javascript,Redux,React Redux,我正在为我的第一个react redux应用程序学习redux。如何在更改状态之前验证有效负载值?例如,下面的代码: todoExample = {name: 'learn redux', author: 'myself'} wrongTodoExample = {name: 'learn redux'} dispatch(addTodos({todo: todoExample})) dispatch(addTodos({todo: wrongTodoExample })) 使用上面的代码

我正在为我的第一个react redux应用程序学习redux。如何在更改状态之前验证有效负载值?例如,下面的代码:

todoExample = {name: 'learn redux', author: 'myself'}
wrongTodoExample = {name: 'learn redux'}

dispatch(addTodos({todo: todoExample})) 
dispatch(addTodos({todo: wrongTodoExample }))
使用上面的代码,我向我的状态添加了两个todo项,但它们的键不同

是否有办法检查有效负载值,以便在我的reducer中授权第一个addTodos而不是第二个addTodos?
我在网上搜索过,但找不到答案。如果我的问题是多余的,我很抱歉。

您对
相同密钥的描述不太清楚,您指的是姓名或作者,或其他特定密钥,如code\id.
您可以在发送前或在
addTodos

function addTodos(payload) {
  if (!payload.todo.code) return;
  // simply return,
  // otherwise throw an error to indicate that your todos miss a specific key
}

您可以使用redux中间件进行验证,这绝对是中间件的预期用途之一。任何中间件都可以在到达减缩器之前检查和修改通过管道的任何操作,甚至阻止操作继续进行

const verifyPayload = store => next => action => {
  if (isVerifyPayload(action.payload)) {
    return next(action);
  } else {
    return store.dispatch({ type: 'NOT_AUTHORIZED' })
  }
  
}

const store = createStore(
 initialState,
 applyMiddleware(verifyPayload)
)

您可以在减速机中使用三元运算符以及一些util函数来验证todo。如果todo有效,则将状态转换为包含新todo,如果不返回相同的状态(实际上什么也不做)


我找到了一个非常适合我需要的解决方案,它是TypeScript。现在我有了Payload类型,它允许我定义action.Payload中需要的键,而不需要任何验证函数


谢谢你们的asnwers。

当我说他们没有相同的密钥时,我的意思是一个有作者密钥,而不是另一个。我考虑过你的方法,但对每个减速机验证这样的数据有点重要,不是吗?我想也许有更好的方法。谢谢你的回答。这是我的第一个想法,但它不适合我的情况,因为我需要在某个地方证明输入是错误的。不客气。好的,如果您需要在某个地方显示您的输入是错误的,而不是返回相同的状态,那么您可以在状态中设置不同的属性(类似于isToDoInvalid)并在组件中使用它。
const isValidTodo = (todo) => {
    //Implement your validations. E.g: A valid todo will have a name and an author
    return todo.name && todo.author;
}

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return isValidTodo(action.payload) ?
      [
        ...state,
        {
          name: action.payload.name,
          author: action.payload.text,
          completed: false
        }
      ] 
   : state
    default:
      return state
  }
}