import React from 'react';
import { createStore } from 'redux';
// app.js
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import { rootReducer } from '../redux/reducers';

const App = ({ Component, pageProps, store }) => {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
};

export default withRedux(() => createStore(rootReducer))(App);

// index.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { incrementCounter } from '../redux/actions';

const Index = (props) => {
  const counter = useSelector((state) => state.counterReducer.counter);
  const dispatch = useDispatch();

  return (
    <>
      <h1>{counter}</h1>
      <button onClick={() => dispatch(incrementCounter())}>+</button>
    </>
  );
};

export default Index;