首页 > 其他 > 详细

[Redux] Extracting Action Creators

时间:2016-02-12 06:05:49      阅读:205      评论:0      收藏:0      [点我收藏+]

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))
    }
  }
}

 

[Redux] Extracting Action Creators

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!