// src/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count += 1; },
    decrement: (state) => { state.count -= 1; },
    reset: (state) => { state.count = 0; },
  },
});

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

// src/store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: { counter: counterReducer },
});

// src/main.jsx
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

// <Provider store={store}><App /></Provider> wraps the whole app here

// src/App.jsx
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, reset } from "./counterSlice";

function Counter() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
    </div>
  );
}

function App() {
  return <Counter />;
}

export default App;

/*
  Notes:
  - This requires three separate files (slice, store, Provider setup)
    plus a Provider wrapping the app — noticeably more ceremony than
    the single-file, no-Provider Zustand version from Challenge 1.
  - state.count += 1 inside the reducer LOOKS like a direct mutation,
    but Redux Toolkit's createSlice uses Immer underneath to translate
    it into a proper immutable update — this is safe specifically
    because it's inside a createSlice reducer, not a general rule for
    React state.
*/