Redux Toolkit Javascript Starter

Install redux toolkit and react-redux

pnpm install @reduxjs/toolkit react-redux

Create a redux store

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

Provide the redux store to react

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

Create a redux state slice

// 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