mapdispatchtoprops

// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });

// reducer.js
const initialState = { count: 0 };
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// mapDispatchToProps.js
import { increment, decrement } from './actions';

const mapDispatchToProps = (dispatch) => ({
  onIncrement: () => dispatch(increment()),
  onDecrement: () => dispatch(decrement())
});

// Counter.js
import React from 'react';
import { connect } from 'react-redux';
import { mapDispatchToProps } from './mapDispatchToProps';

const Counter = ({ count, onIncrement, onDecrement }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={onIncrement}>Increment</button>
    <button onClick={onDecrement}>Decrement</button>
  </div>
);

const mapStateToProps = (state) => ({
  count: state.count
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);