RTK Starter Template - Type 2

rtk-starter-2.js

/*** createAppSlice.js ****/
// import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit";

// export const createAppSlice = buildCreateSlice({
// 	creators: { asyncThunk: asyncThunkCreator },
// });

/*** mySlice.js ***/
import { createAppSlice } from "./createAppSlice";

export const mySlice = createAppSlice({
  name: "name",
  initialState: {
    status: "idle",
    // other states
  },
  reducers: create => ({
    method: create.reducer((state, action) => {
      // mutate state here
    }),
    
    // other action methods

    asyncMethod: create.asyncThunk(
      async subject => {
        // fetch and return data
        // will become action payload
      },
      {
        pending: state => {
          state.status = "loading";
        },
        fulfilled: (state, action) => {
          state.status = "idle";
          // mutate state here, use action payload
          // which is return value of async method
        },
        rejected: state => {
          state.status = "failed";
        },
      }
    ),
  }),
});

export const { method, asyncMethod } = mySlice.actions;
export default mySlice.reducer;

/*** store.js ***/
// import { configureStore } from "@reduxjs/toolkit";
// import myReducer from "./mySlice";
//
// export const store = configureStore({
//   reducer: {
//     app: myReducer,
//   },
// });

/*** main.jsx */
// import { Provider } from "react-redux";
// import { store } from "./store";
//
// <Provider store={store}>
//  <YourApp />
// </Provider>