Gathering detailed insights and metrics for resurrection
Gathering detailed insights and metrics for resurrection
Installations
npm install resurrectionDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.19.1
NPM Version
8.12.2
Score
73.7
Supply Chain
98.6
Quality
90.8
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
26,129
Last Day
34
Last Week
133
Last Month
1,829
Last Year
9,354
Bundle Size
37.32 kB
Minified
9.94 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.13.0
Package Id
resurrection@1.13.0
Unpacked Size
283.27 kB
Size
80.17 kB
File Count
358
NPM Version
8.12.2
Node Version
18.19.1
Published on
May 15, 2025
Total Downloads
Cumulative downloads
Total Downloads
26,129
Peer Dependencies
3
resurrection
A lightweight state management library that follows Flux/Redux architecture but uses React's latest useContext and useReducer hooks. It provides a simple and efficient way to manage global state in React applications.
Features
- Type-safe context and state management
- Redux-like action creators and reducers
- React hooks for state access and dispatch
- Simple and complex context providers
- Automatic state initialization
- Redux-like connect HOC for components
Installation
1npm install resurrection 2# or 3yarn add resurrection
Basic Usage
1. Define Types and Create Reducer
First, define your state types and create a reducer using createSlice:
1import { createSlice, Draft, ContextStoreInitializer } from 'resurrection'; 2 3interface AppState { 4 users: User[]; 5 settings: Settings; 6} 7 8interface User { 9 id: string; 10 email: string; 11 firstName: string; 12 lastName: string; 13} 14 15interface Settings { 16 theme: 'light' | 'dark'; 17 language: string; 18 notifications: boolean; 19} 20 21// Define initial state 22const initialState: AppState = { 23 users: [], 24 settings: { 25 theme: 'light', 26 language: 'en', 27 notifications: true, 28 }, 29}; 30 31// Create initializer function 32export const getInitialState: ContextStoreInitializer<any, AppState> = (initialState) => { 33 return { 34 ...appInitialState, 35 ...initialState, 36 }; 37}; 38 39// Define reducer actions 40const SetUsers = (state: Draft<AppState>, users: User[]) => { 41 state.users = users; 42}; 43 44const UpdateUser = (state: Draft<AppState>, user: User) => { 45 const index = state.users.findIndex((u) => u.id === user.id); 46 if (index !== -1) { 47 state.users[index] = user; 48 } 49}; 50 51const UpdateSettings = (state: Draft<AppState>, settings: Partial<Settings>) => { 52 state.settings = { 53 ...state.settings, 54 ...settings, 55 }; 56}; 57 58// Create the reducer 59export const appSlice = createSlice({ 60 name: 'App', 61 initialState, 62 actions: { 63 SetUsers, 64 UpdateUser, 65 UpdateSettings, 66 }, 67});
2. Create Context and Provider
Next, create your context and provider using the reducer:
1import { FC, Reducer } from 'react'; 2import { 3 createContextWithName, 4 Provider, 5 ReducerActionCreators, 6} from 'resurrection'; 7 8import { getInitialState, initialState, appSlice } from './reducer'; 9import { AppState } from './types'; 10 11// Get action creators 12export const appContextActions = appSlice.actions; 13 14// Define actions type 15type AppActions = ReducerActionCreators<typeof appContextActions, 'App'>; 16 17// Create context 18export const AppContext = createContextWithName<AppState, AppActions>( 19 'App', 20 initialState 21); 22 23// Destructure context utilities 24export const { 25 StateContext: AppStateContext, 26 useSelector: useAppSelector, 27 DispatchContext: AppDispatchContext, 28 useDispatch: useAppDispatch, 29} = AppContext; 30 31// Create provider component 32export const AppContextProvider: FC<{ 33 children: React.ReactNode; 34 initialState?: AppState; 35}> = ({ children, ...restOfProps }) => { 36 return ( 37 <Provider 38 {...restOfProps} 39 StateContext={AppStateContext} 40 reducer={appSlice.reducer as unknown as Reducer<AppState, AppActions>} 41 initializer={getInitialState} 42 DispatchContext={AppDispatchContext} 43 > 44 {children} 45 </Provider> 46 ); 47};
3. Use in Your Application
Finally, wrap your application with the provider and use the context:
1// In your root layout or app component 2export default async function RootLayout({ 3 children, 4}: { 5 children: React.ReactNode; 6}) { 7 // Fetch initial state (e.g., from API) 8 const initialState = await getInitialData(); 9 10 return ( 11 <AppContextProvider initialState={initialState}> 12 <html lang="en"> 13 <body>{children}</body> 14 </html> 15 </AppContextProvider> 16 ); 17} 18 19// In your components 20const UserList = () => { 21 const users = useAppSelector((state) => state.users); 22 const dispatch = useAppDispatch(); 23 24 return ( 25 <div> 26 {users.map(user => ( 27 <UserCard key={user.id} user={user} /> 28 ))} 29 </div> 30 ); 31};
API Reference
createSlice
Creates a reducer with typed actions:
1createSlice({ 2 name: string; 3 initialState: State; 4 actions: { 5 [key: string]: (state: Draft<State>, payload: any) => void; 6 }; 7})
Using the connect HOC
The connect HOC provides a way to connect components to your context store, similar to Redux's connect pattern. Here's an example:
1import { connect, ConnectHookProps, ConnectOptionUseEffectAfterChangeReturn } from 'resurrection'; 2 3// Define your component props types 4interface AppMapStateToProps { 5 items: Item[]; 6 searchQuery: string; 7} 8 9interface AppMapDispatchToProps { 10 SetSearchQuery: (query: string) => void; 11 SetItems: (items: Item[]) => void; 12} 13 14interface AppOwnProps { 15 // Any additional props your component needs 16} 17 18type AppConnectedProps = AppMapStateToProps & AppMapDispatchToProps & AppOwnProps; 19 20// Your component 21const App: React.FC<AppConnectedProps> = ({ 22 items, 23 searchQuery, 24 SetSearchQuery 25}) => { 26 return ( 27 <div> 28 <input 29 value={searchQuery} 30 onChange={(e) => SetSearchQuery(e.target.value)} 31 /> 32 {/* Rest of your component */} 33 </div> 34 ); 35}; 36 37// Connect the component 38export default connect< 39 AppMapStateToProps, 40 AppMapDispatchToProps, 41 AppOwnProps 42>({ 43 mapStateToPropsOptions: [ 44 { 45 context: AppStateContext, 46 mapStateToProps: (state: AppState) => ({ 47 items: state.items, 48 searchQuery: state.searchQuery 49 }) 50 } 51 ], 52 mapDispatchToPropsOptions: [ 53 { 54 context: AppDispatchContext, 55 mapDispatchToProps: { 56 SetSearchQuery: appContextActions.SetSearchQuery, 57 SetItems: appContextActions.SetItems 58 } 59 } 60 ], 61 useHookEffectAfterChange: <T = AppMapStateToProps['searchQuery'],>({ 62 stateToProps, 63 dispatchToProps 64 }: ConnectHookProps< 65 AppMapStateToProps, 66 AppMapDispatchToProps, 67 AppOwnProps 68 >): ConnectOptionUseEffectAfterChangeReturn<T> => { 69 const value = stateToProps.searchQuery as T; 70 const callback = dispatchToProps.SetItems; 71 const condition = (prevValue: T, value: T) => prevValue !== value; 72 return [value, callback, condition]; 73 } 74})(App);
The connect HOC accepts three type parameters:
TMapStateToProps: The type of props that will be mapped from stateTMapDispatchToProps: The type of props that will be mapped from dispatchTOwnProps: The type of props that the component accepts directly
The configuration object accepts:
mapStateToPropsOptions: Array of state mapping configurationsmapDispatchToPropsOptions: Array of dispatch mapping configurationsuseHookEffectAfterChange: Optional effect hook for handling state changes
Context Utilities
The context provides several utilities:
StateContext: The context for accessing stateDispatchContext: The context for dispatching actionsuseSelector: Hook for selecting stateuseDispatch: Hook for dispatching actions
Provider Props
1interface ProviderProps<T, A> { 2 StateContext: React.Context<T>; 3 DispatchContext: React.Context<React.Dispatch<A>>; 4 reducer: Reducer<T, A>; 5 initializer: ContextStoreInitializer<any, T>; 6 initialState?: T; 7 children: React.ReactNode; 8}
Development
This library was generated with Nx.
Running unit tests
Run nx test resurrection to execute the unit tests via Vitest.
License
MIT © nathanhfoster
No vulnerabilities found.
No security vulnerabilities found.