|
| 1 | +Types and terminology |
| 2 | +===================== |
| 3 | + |
| 4 | +This is a glossary of the core terms in Redux, along with their type signatures. Types documented using [Flow notation](http://flowtype.org/docs/quick-reference.html#_). |
| 5 | + |
| 6 | +### State |
| 7 | + |
| 8 | +```js |
| 9 | +type State = any |
| 10 | +``` |
| 11 | + |
| 12 | +**State** is a broad term, but in the Redux API it usually refers to the single state value that is managed by the store and returned by `getState()`. It is composed of nested properties and represents the entire state of the Redux store. By convention, the top-level state is an an object or some other key-value collection like a Map, but technically it can be any type. |
| 13 | + |
| 14 | +### Action |
| 15 | + |
| 16 | +```js |
| 17 | +type Action = Object |
| 18 | +``` |
| 19 | + |
| 20 | +An **action** is a payload of information that is used to accumulate state. The application uses actions to send data to the store. By convention, they contain a `type` property which indicates the nature of the action being dispatched. |
| 21 | + |
| 22 | +See also **intermediate actions** below. |
| 23 | + |
| 24 | +### Dispatching function |
| 25 | + |
| 26 | +```js |
| 27 | +type Dispatch = (a: Action | IntermediateAction) => any |
| 28 | +``` |
| 29 | + |
| 30 | +A **dispatching function** (or simply **dispatch function**) is a function that accepts an action or an intermediate action; it then may or may not dispatch one or more actions to the store. |
| 31 | + |
| 32 | +We must distinguish between dispatching functions in general and the base dispatch function provided by the Store interface. The base dispatch function *always* sends an action to the store's reducer, along with the previous state returned by the store, to calculate a new state. However, the application will rarely call the base dispatch function directly — usually, the base dispatch function is wrapped by middleware. See below for more information. |
| 33 | + |
| 34 | +### Reducer |
| 35 | + |
| 36 | +```js |
| 37 | +type Reducer<S,A> = (state: S, action: A) => S |
| 38 | +``` |
| 39 | + |
| 40 | +A **reducer** or **reducing function** is a function that accepts an accumulation and a value and returns a new accumulation. They are used to reduce a collection of values down to a single value. Reducers are not unique to Redux — they are a fundamental concept in functional programming. Even most non-functional languages, like JavaScript, have a built-in API for reducing. (In JavaScript, it's `Array.prototype.reduce()`.) |
| 41 | + |
| 42 | +In Redux, the accumulated value is the state object, and the values being accumulated are actions. Reducers calculate a new state given the previous state and an action. They must be *pure functions* — functions that return the exact same output for given inputs. They should also be free of side-effects. This is what enables exciting features like hot reloading and time travel. |
| 43 | + |
| 44 | +Reducers are the most important concept in Redux. |
| 45 | + |
| 46 | +### Action creator |
| 47 | + |
| 48 | +```js |
| 49 | +type ActionCreator = (...args) => Action | IntermediateAction |
| 50 | +``` |
| 51 | + |
| 52 | +An action creator is, quite simply, a function that creates an action. Do not confuse the two terms — again, an action is a payload of information, and an action creator is a factory that creates them. |
| 53 | + |
| 54 | +### Intermediate action |
| 55 | + |
| 56 | +```js |
| 57 | +type IntermediateAction = any |
| 58 | +``` |
| 59 | + |
| 60 | +An *intermediate action* is a value that is sent to a dispatching function, but is not yet ready for consumption by the reducer; it will be transformed by middleware before being sent to the base `dispatch()` function. Intermediate actions are often asynchronous primitives, like a promise or a thunk, which are not dispatched themselves, but trigger dispatches once an operation has completed. |
| 61 | + |
| 62 | +### Middleware |
| 63 | + |
| 64 | +```js |
| 65 | +type Middleware = ({ dispatch: Dispatch, getState: () => State }) => next: Dispatch => Dispatch |
| 66 | +``` |
| 67 | + |
| 68 | +A middleware is a higher-order function that composes a dispatch function to return a new dispatch function. |
| 69 | + |
| 70 | +- The outermost function receives an object of methods which are a subset of the Store interface: `dispatch()` and `getState()`. This gives the inner function access to these methods. |
| 71 | +- That returns another function, which receives a dispatch function. This dispatch function is not necessarily the same as the base dispatch function passed to the outermost function — it is the next dispatch function in the middleware chain. |
| 72 | +- The innermost function is a dispatch function. It receives an action, and can either call the next dispatch function in the chain, or call the base dispatch function to restart the chain. It can call either function asynchronously and multiple times, or it can call nothing at all. A no-op middleware should synchronously call `next(action)`. |
| 73 | + |
| 74 | +Middleware is composable using function composition. |
| 75 | + |
| 76 | +### Store |
| 77 | + |
| 78 | +```js |
| 79 | +type Store = { dispatch: Dispatch, getState: State, subscribe: Function, getReducer: Reducer, replaceReducer: void } |
| 80 | +``` |
| 81 | + |
| 82 | +Store is an object of bound methods to an underlying class instance. |
| 83 | + |
| 84 | +- `dispatch()` is the base dispatch function described above. |
| 85 | +- `getState()` returns the current state of the store. |
| 86 | +- `subscribe()` registers a function to be called on state changes. It returns an unsubscribe function. |
| 87 | +- `getReducer()` and `replaceReducer()` are used to implement hot reloading, and should not be used directly. |
| 88 | + |
| 89 | +### Store-creating function |
| 90 | + |
| 91 | +```js |
| 92 | +type CreateStore = (reducer: Function, initialState: any) => Store |
| 93 | +``` |
| 94 | + |
| 95 | +A store-creating function is a function that creates a Redux store. Like with dispatching function, we must distinguish the base store-creating function, `createStore()`, from store-creating functions that are returned from higher-order stores. |
| 96 | + |
| 97 | +### Higher-order store |
| 98 | + |
| 99 | +```js |
| 100 | +type HigherOrderStore = CreateStore |
| 101 | +``` |
| 102 | + |
| 103 | +A higher-order store is a higher-order function that composes a store-creating function to return a new store-creating function. This is similar to middleware in that it allows you to alter the store interface in a composable way. |
0 commit comments