Skip to content

Instantly share code, notes, and snippets.

@eimg
Created January 26, 2024 04:04
Show Gist options
  • Save eimg/cd849643da09cdea12348d205c4f5339 to your computer and use it in GitHub Desktop.
Save eimg/cd849643da09cdea12348d205c4f5339 to your computer and use it in GitHub Desktop.
RTK Starter Template - Type 2
/*** 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment