-
Robert Knight authored
Introduce a pattern for creating store modules which are fully typed, using the "activity" module as a test case / example. This allows TypeScript to check both external usage of the module, as well as internal consistency between the different elements of it (initial state, reducers, action creators, selectors). The elements of this pattern are: - A `State` type is defined in each module, which is typically whatever shape the module's initial state has. - Each function in the `reducers` map specifies the type of its `state` parameter as `State` and defines the fields of the action. - Action creators use a new `makeAction` helper, which ensures that the type of dispatched actions matches what the reducer expects - The `createStoreModule` helper ties all the elements of the module (reducers, actions, selectors) together and makes sure they are consistent with one another. The general structure of a typed store module, to which the various existing modules will converge, is: ```js import { createStoreModule, makeAction } from '../create-store'; const initialState = { ... } /** @typedef {typeof initialState} State */ const reducers = { /** * @param {State} state * @param {{ id: string }} action */ SOME_ACTION(state, action) { ... } } /** * @param {string} id */ function someAction(id) { return makeAction(reducers, 'SOME_ACTION', { id }); } /** * @param {State} */ function someSelector(state) { ... } export someModule = createStoreModule(initialState, { namespace: 'someModule', reducers, actionCreators: { someAction }, selectors: { someSelector }, }); ```
9d40fff9