Question

我正在尝试更改store on（addList）事件并检查这是否是第一个列表要触发的列表数组（selectList）并将其添加到（state.selectedList.list）。只要onClick事件处理列表数组，就会使用now（selectList）。问题是我应该何时以及如何处理添加第一个列表到selectedList的事件，而不是像以前一样使用（selectList）onClick事件。

export default connect(
      state => ({
        lists: getEntities('lists')(state),
        selectedList: state.selectedList.list
      }),
      dispatch => ({
        addList: (name) => dispatch({type: 'ADD_LIST', payload: name}),
        selectList: (listId) => dispatch({type: 'CHANGE_SELECTED_LIST', payload: listId})
      })
    )(Lists)

Answer 1

如果您同时添加name和id列表，则可以通过单击添加，然后可以在addList处理程序中完成：

addList(name, id) { // bound with click
  const size = this.props.lists.length
  this.props.addList(name)
  if(!size) {
    this.props.selectList(id)
  }
}

否则，您需要等待创建列表（获取id）然后调度selectList操作。最脏的解决方案可能就是：

addList(name) { // bound with click
  const size = this.props.lists.length
  this.props.addList(name)
  if(!size) {
    // don't do that! it's just for proof of concept
    setTimeout(() => this.props.selectList(this.props.lists[size].id))
  }
}

更进一步，您可以使用componentWillReceiveProps挂钩来捕捉lists.length成为1，然后正常触发selectList：

componentWillReceiveProps(nextProps) {
  const previousSize = this.props.lists.length
  const size = nextProps.lists.length
  if(previousSize === 0 && size === 1) {
    this.props.selectList(nextProps.lists[size].id))
  }
}

另一个选项是reducer，我们不处理新列表id，但只处理以前的列表大小（并且不需要额外的动作触发器）：

case ADD_LIST:
  return {...state,
    lists: [...state.lists,
      action.newList
    ],
    selectList: {...state.selectList,
      list: !state.lists.length ? action.newList : state.selectList.list
    }
  }

最后，而不是以上所有，动作创建者（我最喜欢的一个）：

export function addList(name) {
  return (dispatch, getState) => {
    const size = getState().lists.length
    const newList = generateNewListByName(name)
    dispatch({
      type: ADD_LIST,
      newList
    })
    if(size === 0)
      dispatch({
        type: CHANGE_SELECTED_LIST,
        selectedListId: newList.id
      })
    }
  }
}

最后一个需要适应你的基础设施，但主要思想仍然是相同的：通过一些先前的状态条件（size === 0）做一些逻辑。

React Redux根据条件调度2个动作

1 个答案: