Redux Adapter

Redux provides centralized state management, and Ignite-Element’s Redux adapter seamlessly integrates with Redux stores. With Ignite-Element, you can use either slices or enhanced stores.

---

Using a Redux Slice

When passing a slice to Ignite-Element, the library automatically infers the action types, so you don’t need to provide them explicitly.

TypeScript

import { createSlice } from "@reduxjs/toolkit";
import { igniteCore } from "ignite-element";

interface CounterState {
  count: number;
}

const initialState: CounterState = {
  count: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.count++;
    },
    decrement: (state) => {
      state.count--;
    },
    addByAmount: (state, action: PayloadAction<number>) => {
      state.count += action.payload;
    },
  },
});

const counterReducer = counterSlice.reducer;

Plug into Ignite-Element

You can use this slice with Ignite-Element as follows:

TypeScript

import { igniteCore } from "ignite-element";
import counterSlice from "./counterSlice";

const igniteElement = igniteCore({
  adapter: "xstate",
  source: counterSlice,
});

Learn More: Check out the Redux documentation on createSlice.

---

Using an Enhanced Redux Store

If you’re using an enhanced store (e.g., one that combines multiple reducers or middleware), you can explicitly pass the actions to Ignite-Element for stronger type safety.

TypeScript

import { igniteCore } from "ignite-element";

interface CounterState {
  count: number;
}

const initialState: CounterState = {
  count: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.count++;
    },
    decrement: (state) => {
      state.count--;
    }
  },
});

const counterReducer = counterSlice.reducer;

export const { increment, decrement } = counterSlice.actions;

export const counterStore = () => configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Plug into Ignite-Element

You can use this store with Ignite-Element as follows:

TypeScript

import { igniteCore } from "ignite-element";
import { counterStore, increment, decrement } from "./counterStore";

// Pass the enhanced store and actions for type safety
export const { shared, isolated } = igniteCore({
  adapter: "redux",
  source: counterStore,
  actions: { increment, decrement, addByAmount }, // Explicitly define actions
});

Learn More: Check out the Redux documentation on configuring an enhanced store.

---

When to Use Each Approach

• Redux Slice: If your application uses slices for state management, use this approach. Ignite-Element can automatically infer the actions from the slice, simplifying the setup.

• Enhanced Store: This approach is useful when working with an enhanced store, such as one that combines multiple slices, includes middleware, or uses advanced configurations. Passing actions explicitly ensures type safety and avoids errors when dispatching events.

---

Why Pass Actions?

Explicitly passing actions when using an enhanced store provides:

• Type Safety: Prevents runtime errors by enforcing correct action types.

• Developer Experience: Offers clear visibility into the actions available for components.

This flexibility ensures that Ignite-Element integrates smoothly with simple and complex Redux setups.