• 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
Name
Last commit
Last update
.github Loading commit data...
bin Loading commit data...
dev-server Loading commit data...
docs Loading commit data...
embedding-examples Loading commit data...
images Loading commit data...
requirements Loading commit data...
scripts Loading commit data...
src Loading commit data...
.babelrc Loading commit data...
.dockerignore Loading commit data...
.eslintignore Loading commit data...
.eslintrc Loading commit data...
.gitignore Loading commit data...
.npmignore Loading commit data...
.npmrc Loading commit data...
.prettierignore Loading commit data...
.python-version Loading commit data...
CODE_OF_CONDUCT Loading commit data...
Dockerfile Loading commit data...
Jenkinsfile Loading commit data...
LICENSE Loading commit data...
Makefile Loading commit data...
README.md Loading commit data...
codecov.yml Loading commit data...
gulpfile.mjs Loading commit data...
package.json Loading commit data...
pyproject.toml Loading commit data...
requirements-dev.in Loading commit data...
rollup-boot.config.mjs Loading commit data...
rollup-tests.config.mjs Loading commit data...
rollup.config.mjs Loading commit data...
tailwind.config.mjs Loading commit data...
tox.ini Loading commit data...
tsconfig.json Loading commit data...
yarn.lock Loading commit data...