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