DEV Community

Cover image for No createStore, No combineReducers, No Provider — Setting Up State in 3 Lines
SDuX Vault
SDuX Vault

Posted on

No createStore, No combineReducers, No Provider — Setting Up State in 3 Lines

#redux #typescript #statemanagement #webdev

Redux setup is a ceremony. You create a store, compose your reducers into a root tree, wrap your app in a Provider, register middleware, and configure enhancers — all before you write a single line of feature logic. SDuX Vault™ replaces that entire ceremony with two function calls and zero root configuration.

Redux Store Ceremony

A typical Redux application requires several files and configuration steps before state management is operational. Here is what a minimal Redux setup looks like for a single feature:

// store.ts
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { userReducer } from './reducers/userReducer';

const rootReducer = combineReducers({
  users: userReducer,
});

export const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

// App.tsx — Provider wrapper required
import { Provider } from 'react-redux';
import { store } from './store';

function App() {
  return (
    <Provider store={store}>
      <UserList />
    </Provider>
  );
}
Enter fullscreen mode Exit fullscreen mode

That is 20+ lines of configuration across multiple files — and it only covers one feature. Add a second feature and you are back in the combineReducers file, composing another slice into the tree. Add middleware and you are threading enhancers through applyMiddleware. Add DevTools and you are composing composeWithDevTools on top.

Every new feature touches the root configuration.

Redux Requirement What It Does
createStore() Creates the single global store instance
combineReducers() Composes feature reducers into a root tree
applyMiddleware() Registers middleware (thunk, saga, etc.)
Provider Makes the store available to all components via context
composeWithDevTools() Enables Redux DevTools integration

⚠️ Warning: Every entry in that table is root-level configuration. Adding a new feature means editing the root reducer composition, possibly the middleware stack, and potentially the Provider hierarchy. Root configuration is a shared dependency — every team touches the same files.

Vault + FeatureCell Setup

SDuX Vault does not have a root store. There is no reducer tree to compose, no middleware to register, and no Provider to wrap. Setup is two function calls:

  1. Initialize the Vault (once, at application startup).
  2. Register a FeatureCell (per feature). 
Vault({
  devMode: true,
  logLevel: 'debug'
});

export const employeeCell = FeatureCell({
  key: 'employees',
  initialState: []
});
Enter fullscreen mode Exit fullscreen mode

That is the entire setup. No root reducer. No combineReducers. No Provider wrapper. No middleware composition. The FeatureCell is self-contained — it owns its state, its pipeline configuration, and its execution lifecycle.

Adding a second feature does not require editing any root configuration. You register a second FeatureCell and it operates independently:

Vault({ logLevel: 'debug' });

export const employeeCell = FeatureCell({
  key: 'employees',
  initialState: []
});

export const cartCell = FeatureCell({
  key: 'cart',
  initialState: { items: [], total: 0 }
});
Enter fullscreen mode Exit fullscreen mode

Each FeatureCell is registered independently. They share nothing — no root reducer, no global namespace, no store-level coupling. Adding the tenth feature is exactly as simple as adding the first.

Key takeaway: In SDuX Vault, there is no root configuration ceremony. Each FeatureCell declares its own state, its own behaviors, and its own controllers. The Vault coordinates execution — you do not compose a global tree.

No Provider Required

Redux requires a Provider component at the root of your application to make the store available via React context. Every component that needs state must be a descendant of that Provider.

SDuX Vault has no Provider. FeatureCells are registered at application startup and are globally accessible by direct import (React, Vue, Svelte, Node) or injection (Angular). There is no context hierarchy to manage and no Provider nesting to debug.

Concern Redux SDuX Vault
Store creation createStore() + combineReducers() Vault() — one call
Feature registration Add to root reducer tree FeatureCell() — independent
Middleware applyMiddleware() composition Pipeline behaviors — declarative
Provider wrapper Required at app root Not needed
Adding a feature Edit root reducer + store Register a new FeatureCell
DevTools composeWithDevTools() Built-in — zero config

Side-by-Side Coexistence During Migration

Because SDuX Vault does not use a global store, it can run alongside Redux in the same application. You do not need to rewrite your Redux setup to start using FeatureCells. Register a Vault, add a FeatureCell for your next feature, and let the two systems coexist.

Your existing Redux store continues to manage its features. New features use FeatureCells. Over time, features can be migrated one at a time — each migration is isolated and does not affect the Redux store or other FeatureCells.

There is no big-bang migration. No root configuration rewrite. No flag day.

Key takeaway: For a complete mapping of Redux concepts to SDuX Vault equivalents, see the Migration Guide.

Try It Yourself

See the full FeatureCell registration API and configuration options:

Top comments (0)