Skip to content

Commit 9522aed

Browse files
committed
Add types and terminology
1 parent 01b8e41 commit 9522aed

File tree

3 files changed

+115
-3
lines changed

3 files changed

+115
-3
lines changed

docs/higher-order-stores.md

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ A higher-order store is a function that turns a store creating function into a n
77
createStore => createStore'
88
```
99

10-
Look familiar? It's just like the signature for [middleware](middleware.md), only we're wrapping `createStore()` instead of `dispatch()`. Like middleware, the key feature of higher-order stores is that they are composable.
10+
Look familiar? It's like the signature for [middleware](middleware.md), only we're wrapping `createStore()` instead of `dispatch()`. Like middleware, the key feature of higher-order stores is that they are composable.
1111

1212
Higher-order stores are much the same as higher-order components in React. They can be as simple as `applyMiddleware()`, or as powerful as the [Redux Devtools](https://github.com/gaearon/redux-devtools). There's no limit to the kinds of extensions you can create.
1313

@@ -38,7 +38,7 @@ export default function applyMiddleware(...middlewares) {
3838

3939
`next` is the next store creating function in the chain — either the return value of another higher-order store, or `createStore()` itself.
4040

41-
This design allows multiple higher-stores can be combined simply using function composition:
41+
This design allows for multiple higher-order stores to be used together using function composition.
4242

4343
```js
4444
const newCreateStore = compose(
@@ -51,7 +51,15 @@ const newCreateStore = compose(
5151
Now just pass your reducer (and an initial state, if desired) to your new store creating function:
5252

5353
```js
54-
const store = createStore(reducer, intialState);
54+
const store = newCreateStore(reducer, intialState);
5555

5656
<Provider store={store} />
5757
```
58+
59+
## Creating higher-order stores
60+
61+
The signature of a higher-order store looks like this:
62+
63+
## Middleware versus higher-order stores
64+
65+
Middleware and higher-order stores are conceptually similar. Both wrap around the store interface to modify its behavior in a composable way. The difference is that middleware is exclusively concerned with modifying the behavior of `dispatch()`, whereas higher-order stores can modify any part of the store interface.

docs/testing.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# TODO

docs/types-and-terminology.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
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

Comments
 (0)