Redux 动作创建者语法

IT技术 javascript reactjs redux
2021-05-26 20:59:32
function addTodoWithDispatch(text) {
  const action = {
    type: ADD_TODO,
    text
  }
  dispatch(action)
}

http://redux.js.org/docs/basics/Actions.html#action-creators

我从 redux 文档中看到了上面的代码。我不明白的是textaction它看起来不像一个有效的 javascript 对象或数组语法。它是 ES6 的新语法吗?谢谢。

3个回答

它只是一个新的ES6 语法,它简化了在文字语法上创建属性

简而言之,如果名字和属性一样,你只需要写一次

所以这将完全相同:)

function addTodoWithDispatch(text) {
  const action = {
    type: ADD_TODO,
    text: text
  }
  dispatch(action)
}

在上面的代码中

function addTodoWithDispatch(text) {
  const action = {
    type: ADD_TODO,
    text
  }
  dispatch(action)
}

text是对象文字速记符号的示例。ES6 为您提供了一个快捷方式,用于在一个对象上定义属性,该对象的值等于另一个具有相同键的变量。

如前所述,这只是写作的速记

const action = {
    type: ADD_TODO,
    text: text
  }
  dispatch(action)

看看这个博客

如果您查看文档http://redux.js.org/docs/basics/Reducers.html中的下一页

function todoApp(state = initialState, action) {
 switch (action.type) {
  case SET_VISIBILITY_FILTER:
  return Object.assign({}, state, {
    visibilityFilter: action.filter
  })
 case ADD_TODO:
  return Object.assign({}, state, {
    todos: [
      ...state.todos,
      {
        text: action.text,
        completed: false
      }
    ]
  })
case TOGGLE_TODO:
  return Object.assign({}, state, {
    todos: state.todos.map((todo, index) => {
      if(index === action.index) {
        return Object.assign({}, todo, {
          completed: !todo.completed
        })
      }
      return todo
    })
  })
default:
  return state
 }
}

它期待属性名称文本。正如@Icepickle 提到的,它是一种有效的格式,但您也可以更改为以下格式:

function addTodoWithDispatch(text) {
  const action = {
     type: ADD_TODO,
     text:text
   }
  dispatch(action)
}