Updated

Rematch plugin for maintaining timestamps when an effect is triggered.

Updated is primarily used for optimizing effects. It can be used to:

• prevent expensive fetch requests within a certain time period
• throttle effects

Compatibility

Install the correct version of the updated plugin based on the version of the core Rematch library in your project.

@rematch/core	@rematch/updated
1.x.x	1.x.x
2.x.x	2.x.x

Install

npm

bash
npm install @rematch/updated

bash
npm install @rematch/updated

Yarn

bash
yarn add @rematch/updated

bash
yarn add @rematch/updated

updatedPlugin([config])

The updated plugin accepts one optional argument - config, which is an object with the following properties:

• name (string): the key for the updated state. Default value is updated.

• blacklist (string[]): list of blacklisted model names, for which the plugin will not track effects

• dateCreator (() => any): by default it's a function which returns new Date object when an effect is called. However, if you prefer to use moment or any other custom library, you can provide a custom implementation, such as () => moment().

Usage

Let’s say we have a model ‘count’ in our store which has two effects - fetchOne and fetchTwo. Updated plugin’s state will have the following format:

js
{
  "count": {
    "fetchOne": "2020-12-13T20:48:34.935Z", // Date when fetchOne effect was last fetched
    "fetchTwo": "2020-12-13T20:40:34.935Z" , // Date when fetchTwo effect was last fetched
  }
}

js
{
  "count": {
    "fetchOne": "2020-12-13T20:48:34.935Z", // Date when fetchOne effect was last fetched
    "fetchTwo": "2020-12-13T20:40:34.935Z" , // Date when fetchTwo effect was last fetched
  }
}

Setup the store

To use the plugin, start with adding it to your store:

JavaScript

store.js
js
import updatedPlugin from "@rematch/updated";
import { init } from "@rematch/core";
import * as models from "./models";
init({
  models,
  plugins: [updatedPlugin()],
});

store.js
js
import updatedPlugin from "@rematch/updated";
import { init } from "@rematch/core";
import * as models from "./models";
init({
  models,
  plugins: [updatedPlugin()],
});

TypeScript

store.ts
ts
import updatedPlugin, { ExtraModelsFromUpdated } from "@rematch/updated";
import { init, RematchDispatch, RematchRootState } from "@rematch/core";
import { models, RootModel } from "./models";
type FullModel = ExtraModelsFromUpdated<RootModel>;
// Also you can use loading plugin
// type FullModel =  ExtraModelsFromLoading<RootModel> & ExtraModelsFromUpdated<RootModel>
export const store = init<RootModel, FullModel>({
  models,
  plugins: [updatedPlugin()],
});
export type Store = typeof store;
export type Dispatch = RematchDispatch<RootModel>;
export type RootState = RematchRootState<RootModel, FullModel>;

store.ts
ts
import updatedPlugin, { ExtraModelsFromUpdated } from "@rematch/updated";
import { init, RematchDispatch, RematchRootState } from "@rematch/core";
import { models, RootModel } from "./models";
type FullModel = ExtraModelsFromUpdated<RootModel>;
// Also you can use loading plugin
// type FullModel =  ExtraModelsFromLoading<RootModel> & ExtraModelsFromUpdated<RootModel>
export const store = init<RootModel, FullModel>({
  models,
  plugins: [updatedPlugin()],
});
export type Store = typeof store;
export type Dispatch = RematchDispatch<RootModel>;
export type RootState = RematchRootState<RootModel, FullModel>;

Use in the view

Define a model which uses effects.

some-model.js
js
export const count = {
	...,
    effects: {
      async fetchOne() {},
      async fetchTwo() {},
    }
}

some-model.js
js
export const count = {
	...,
    effects: {
      async fetchOne() {},
      async fetchTwo() {},
    }
}

Use the updated state:

someView.jsx
js
const state = store.getState();
// or just connect() on `react-redux`
console.log(state.updated.count.fetchOne);
console.log(state.updated.count.fetchTwo);

someView.jsx
js
const state = store.getState();
// or just connect() on `react-redux`
console.log(state.updated.count.fetchOne);
console.log(state.updated.count.fetchTwo);