• Robert Knight's avatar
    Introduce a pattern for fully typed store modules · 9d40fff9
    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
NotebookView.js 6.67 KB