Glossary

This page describes the terms commonly used when describing the Redux pattern, and what they mean in the context of reactive-state. If you are already familiar with Redux, this page is a good first read to get to know the data structures used by reactive-state for the objects that you already know. If you are completely new to the Redux pattern, this page might serve as a glossary that you can refer to when reading through the rest of the docs.

---

State: A plain object that represents the current state of an application. The state is subject to change over time as the application state is modified i.e. through user interaction, http responses and other events.

Example:

interface AppState = {
    counter: number;
    todos: string[];
}
const appState: AppState = {
    counter: 0,
    todos: ["Do homework", "Walk the dog"]
};

---

Store: An object that is used to access the state and subscribe to state change events, define how the state is modified through reducers, and create slices to parts of the state.

Example:

const appStore: Store<AppState> = Store.create(initialState);

---

Reducer: A function that takes a state and returns a new state. A reducer thus describes a transition from one state to the next state. The reducer function takes two arguments (the current state) and a (possibly optional) second argument: The payload, a data structure that carries data required when transforming into a new state.

Reducers must be pure functions, that means: For the same input arguments they always return the same output (so no side-effects happen inside of a reducer)!

Example:

const incrementReducer: Reducer<AppState, number> = (state: AppState, payload: number = 1) => {
    const newState: AppState = { ...state, counter: state.counter + payload };
    return newState;
}

---

Action: A data structure that represents some kind of event that will eventually trigger reducers. In reactive-state, actions can be any Observable, but it is often usefull to use a Subject to emit a payload. Actions are dispatched by emitting a value - for Subjects this will be the .next() function:

const incrementAction = new Subject<number>();

// dispatch an action to increment counter by 1
incrementAction.next(1);
// dispatch an action to increment counter by 2
incrementAction.next(2);

---

Slice: An object instance of type Store that holds a smaller part of the object-tree in a State object. Slices are children of a parent Store, except for the global (root) Store which has no parent. Since a Slice is always linked to its parent (and to that parent's parent etc.) any change in a Slice will also affect the State of its ancestors, and changes in an ancestor store might affect all of its descendants (depending if the change is included in the object sub-tree of that Slice).

Example:

const rootStore: Store<AppState> = Store.create(appState);
const counterStore: Store<number> = rootStore.createSlice("counter");
const todoStore: Store<string[]> = rootStore.createSlice("todos");

Remember: As in Redux, reactive-state uses a single store concept. All slices are linked and emit the same instances as in the root store. Slices thus represent a view to a part of the root state.

---

Plain objects: An object in JavaScript is considered "plain" when it is of type Object and all properties are either plain objects or of primitive type (boolean, number, string,null, undefined (void in TypeScript)) or Arrays of those (with Arrays within Array allowed. The State and any Action payload should be plain objects, in order to be able to serialize and deserialize them (think of storing the State to storage, creating Action replay logs, sharing Actions over the network etc.).