With Hooks:

Before:

import React from "react";
import { connect } from "react-redux";
import { addCount } from "./store/counter/actions";
export const Count = ({ count, addCount }) => {
  return (
    <>
      <div>Count: {count}</div>
      <button onClick={addCount}>Count</button>
    </>
  );
};
const mapStateToProps = state => ({
  count: state.counter.count
});
const mapDispatchToProps = { addCount };
export default connect(mapStateToProps, mapDispatchToProps)(Count);

After:

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addCount } from "./store/counter/actions";
export const Count = () => {
  const count = useSelector(state => state.counter.count);
  const dispatch = useDispatch();
  return (
    <>
      <div>Count: {count}</div>
      <button onClick={() => dispatch(addCount())}>
        Count
      </button>
    </>
  );
};

Old:

const mapStateToProps = store => {
  return {
    tasks: store.tasks
  };
};
const mapDispatchToProps = dispatch => ({
  onClickToggle: (id) => dispatch(toggleTask(id)),
  onClickMark: (id) => dispatch(markTask(id)),
  onClickDelete: (id) => dispatch(deleteTask(id)),
  onEditTask: (id, text) => dispatch(editTask(id, text))
});
export default connect(mapStateToProps, mapDispatchToProps)(Tasks);

Leave a Reply

Your email address will not be published. Required fields are marked *