rtk-modules
v1.0.3
Published
```js //store.ts import { setupListeners } from '@reduxjs/toolkit/query'; import { ReduxModule } from 'rtk-module';
Downloads
8
Readme
RTK_MODULES for convenient use of redux
//store.ts
import { setupListeners } from '@reduxjs/toolkit/query';
import { ReduxModule } from 'rtk-module';
export const moduleStore = new ReduxModule<RootState>({
reducer: {
app: AppReduce,
socket: SocketReduce,
request: RequestReduce,
settings: SettingsSlice.reducer,
[requestSocketApi.reducerPath]: requestSocketApi.reducer,
[requestHTTPSApi.reducerPath]: requestHTTPSApi.reducer,
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(requestSocketApi.middleware).concat(requestHTTPSApi.middleware),
});
setupListeners(moduleStore.getStore().dispatch);
import ReactDOM from 'react-dom/client';
import { App } from './App.tsx';
import { Provider } from 'react-redux';
import { moduleStore } from './store/store.ts';
ReactDOM.createRoot(document.getElementById('root')!).render(
<Provider store={moduleStore.getStore()}>
<App/>
</Provider>
)
Connected module
Profile/ store/ types.d.ts profile.store.ts Profile.tsx
//Profile/store/types.d.ts
export type ProfileKey_OR = 'name' | 'fio' | 'phone' | 'avatar';
export interface ProfileState extends Record<ProfileKey_OR, string>{
}
declare global {
interface RootState{
profile: ProfileState
}
}
//Profile/store/profile.store.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { moduleStore } from "@/store/store";
import { ProfileState } from "./types";
const initialState: ProfileState = {
name: "Вася",
fio: "Пупкин",
phone: "",
avatar: "",
};
const ProfileSlice = createSlice({
name: "profile",
initialState,
reducers: {
setName: (profile, { payload }: PayloadAction<{ name: string }>) => {
profile.name = payload.name;
},
},
});
moduleStore.setReducer({
name: ProfileSlice.name,
reduce: ProfileSlice.reducer,
});
export const ProfileSelectors = moduleStore.createSelectors({
getProfile: (rootState) => {
return rootState.profile;
},
getName: (rootState) => {
return rootState.profile.name;
},
});
export const ProfileActions = ProfileSlice.actions;
//Profile/Profile.tsx
import React, { useEffect } from "react"
import { ProfileSelectors,ProfileActions } from './store/profile.store';
import { Button } from '@mui/material';
import { useAppDispatch, useAppSelector } from '@/store/hooksRedux';
const ProfileMemo = (props) => {
const dispatch = useAppDispatch();
const name = useAppSelector(ProfileSelectors.getName);
return (
<div>
<h2>Привет, {name}</h2>
<Button onClick={() => dispatch(ProfileActions.setName({name: 'Петя'}))}>Сменить имя</Button>
</div>
)
};
export const Profile = React.memo(ProfileMemo);