Redux Toolkit Javascript Starter

pnpm install @reduxjs/toolkit react-redux

//store.js
import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
    reducer: {},
});

// pages/_app.js
import { store } from '../store/store';
import { Provider } from 'react-redux';
function MyApp({ Component, pageProps }) {
    return (
        <Provider store={store}>
            <Component {...pageProps} />;
        </Provider>
    );
}
export default MyApp;

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
    value: 0,
};
export const counterSlice = createSlice({
    name: 'counter',
    initialState,
    reducers: {
        increment: (state) => {
            // Redux Toolkit allows us to write "mutating" logic in reducers. It
            // doesn't actually mutate the state because it uses the Immer library,
            // which detects changes to a "draft state" and produces a brand new
            // immutable state based off those changes
            state.value += 1;
        },
        decrement: (state) => {
            state.value -= 1;
        },
        incrementByAmount: (state, action) => {
            state.value += action.payload;
        },
    },
});
// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;