@webdevarif/redux

A customizable Redux ecosystem with dynamic slice creation, store builder, and preset slices for modern React applications.

Features

• 🚀 Dynamic Slice Creation - Create Redux slices with minimal boilerplate
• 🎯 Preset Slices - Pre-built slices for common use cases (auth, notifications)
• 🔧 Customizable Hooks - Powerful hooks for state management
• 📦 TypeScript Support - Full type definitions included
• ⚡ Performance Optimized - Built on Redux Toolkit for optimal performance
• 🎨 React Integration - Seamless integration with React components
• 🔄 Persistence Ready - Built-in support for Redux Persist

Installation

npm install @webdevarif/redux
# or
yarn add @webdevarif/redux
# or
pnpm add @webdevarif/redux

Quick Start

Basic Usage

import { createSimpleSlice, useSlice, useSliceDispatch } from '@webdevarif/redux/core';

// Create a slice
const counterSlice = createSimpleSlice('counter', { count: 0 }, {
  increment: (state, action) => {
    state.count += action.payload || 1;
  },
  decrement: (state, action) => {
    state.count -= action.payload || 1;
  },
});

// Use in component
function Counter() {
  const { state } = useSlice('counter');
  const { dispatch } = useSliceDispatch('counter');

  return (
    <div>
      <h2>Count: {state.count}</h2>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>
        Increment
      </button>
    </div>
  );
}

Preset Slices

import { createAuthSlice, createNotificationSlice } from '@webdevarif/redux/core';

// Create preset slices
const authSlice = createAuthSlice();
const notificationSlice = createNotificationSlice();

// Configure store
import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {
    auth: authSlice.reducer,
    notifications: notificationSlice.reducer,
  },
});

Using Hooks

import { useAuth, useNotifications } from '@webdevarif/redux';

function MyComponent() {
  const { user, isAuthenticated, login, logout } = useAuth();
  const { notifications, unreadCount, markAsRead } = useNotifications();

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <p>Welcome, {user?.name}!</p>
          <p>You have {unreadCount} unread notifications</p>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <button onClick={() => login({ email: '[email protected]' })}>
          Login
        </button>
      )}
    </div>
  );
}

API Reference

Slice Creation

createSimpleSlice(name, initialState, reducers)

Creates a simple Redux slice with common reducers.

const mySlice = createSimpleSlice('mySlice', { value: 0 }, {
  setValue: (state, action) => {
    state.value = action.payload;
  },
  increment: (state) => {
    state.value += 1;
  },
});

createAuthSlice()

Creates a pre-configured authentication slice.

const authSlice = createAuthSlice();
// Includes: user, isAuthenticated, session, loading, error
// Actions: setUser, setSession, logout, reset

createNotificationSlice()

Creates a pre-configured notifications slice.

const notificationSlice = createNotificationSlice();
// Includes: notifications, unreadCount, loading, error
// Actions: addNotification, removeNotification, markAsRead, markAllAsRead

Hooks

useSlice(sliceName)

Access slice state and dispatch.

const { state, dispatch } = useSlice('mySlice');

useSliceState(sliceName)

Access only slice state.

const { state } = useSliceState('mySlice');

useSliceDispatch(sliceName)

Access only slice dispatch.

const { dispatch } = useSliceDispatch('mySlice');

useMultipleSlices(sliceNames)

Access multiple slices at once.

const { states, dispatches } = useMultipleSlices(['auth', 'notifications']);

useForm(initialValues)

Form state management hook.

const { values, errors, setValue, submit, isValid } = useForm({
  email: '',
  password: '',
});

useList(sliceName)

List management hook.

const { items, addItem, updateItem, removeItem } = useList('todos');

useApi(sliceName)

API state management hook.

const { data, loading, error, execute } = useApi('users');

useAuth()

Authentication hook.

const { user, isAuthenticated, login, logout } = useAuth();

useNotifications()

Notifications hook.

const { notifications, unreadCount, markAsRead } = useNotifications();

Store Configuration

Basic Store

import { configureStore } from '@reduxjs/toolkit';
import { createAuthSlice, createNotificationSlice } from '@webdevarif/redux/core';

const authSlice = createAuthSlice();
const notificationSlice = createNotificationSlice();

export const store = configureStore({
  reducer: {
    auth: authSlice.reducer,
    notifications: notificationSlice.reducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

With Redux Persist

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['auth', 'notifications'],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
});

export const persistor = persistStore(store);

TypeScript Support

The package includes full TypeScript definitions:

import { AuthState, NotificationState } from '@webdevarif/redux';

interface MyState extends BaseSliceState {
  data: string[];
}

const mySlice = createSimpleSlice<MyState>('mySlice', {
  data: [],
  loading: false,
  error: null,
});

Examples

Todo App

import React from 'react';
import { createSimpleSlice, useSlice, useSliceDispatch } from '@webdevarif/redux/core';

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}

const todoSlice = createSimpleSlice('todos', { items: [] as Todo[] }, {
  addTodo: (state, action) => {
    state.items.push({
      id: Date.now().toString(),
      text: action.payload,
      completed: false,
    });
  },
  toggleTodo: (state, action) => {
    const todo = state.items.find(item => item.id === action.payload);
    if (todo) {
      todo.completed = !todo.completed;
    }
  },
});

function TodoApp() {
  const { state } = useSlice('todos');
  const { dispatch } = useSliceDispatch('todos');

  return (
    <div>
      {state.items.map(todo => (
        <div key={todo.id}>
          <span>{todo.text}</span>
          <button onClick={() => dispatch(todoSlice.actions.toggleTodo(todo.id))}>
            Toggle
          </button>
        </div>
      ))}
    </div>
  );
}

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, email [email protected] or create an issue on GitHub.