[Redux] Extracting Action Creators

最新推荐文章于 2022-10-24 15:40:49 发布

weixin_30416871

最新推荐文章于 2022-10-24 15:40:49 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5186822.html

本文介绍如何创建一个行动创建器来管理应用状态，通过提取组件中的行动创建器，保持代码的可维护性和自我说明性。具体展示了如何更新派发函数，并在组件中使用这些创建器。

We will create an anction creator to manage the dispatch actions, to keep code maintainable and self-documenting by extracting action creators from the components.

let nextTodoId = 0;
const ACTION_CREATOR = {
  addTodo: (text) => {
    return {
          type: 'ADD_TODO',
          id: nextTodoId++,
          text
        }
  },
  setVisibilityFilter: (filter) => {
    return {
      type: 'SET_VISIBILITY_FILTER',
      filter
    }
  },
  toggleTodo: (id) => {
    return {
        type: 'TOGGLE_TODO',
        id
      }
  }
}

Then update the dispatch function:

...

let AddTodo = ({ dispatch }) => {
  let input;

  return (
    <div>
      <input ref={node => {
        input = node;
      }} />
      <button onClick={() => {
        dispatch(ACTION_CREATOR.addTodo(input.value))
        input.value = '';
      }}>
        Add Todo
      </button>
    </div>
  );
};
AddTodo = connect()(AddTodo);

...
const mapDispatchToTodoListProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(ACTION_CREATOR.toggleTodo(id));
    }
  };
};

....
const mapDispatchToLinkProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch(ACTION_CREATOR.setVisibilityFilter(ownProps.filter))
    }
  }
}