Skip to content

reshape

import { reshape } from 'patronum';
// or
import { reshape } from 'patronum/reshape';

result = reshape({ source, shape })

Motivation

This method allows to create many stores from single store at once. It useful when you want to read many properties from object to different stores.

Formulae

result = reshape({ source, shape });
  • Call each function in shape object with data from source, and create store with the same name as key in shape
  • If function in shape returns undefined, the same store will contain null, because store cannot contain undefined.

Arguments

  1. source (Store) — Source store, data from this unit passed to each function in shape
  2. shape ({ [key: string]: (payload: T) => any }) — Object of functions. Function receives payload of source as single argument, should return any value.

Returns

  • result ({ [key: string]: Store<any> }) — Object of stores, that created with the same structure as shape, with data from passed functions

Examples

Creates much stores from single string

import { createStore } from 'effector';
import { reshape } from 'patronum/reshape';
const $original = createStore<string>('Example');
const result = reshape({
source: $original,
shape: {
length: (string) => string.length,
lowercase: (string) => string.toLowerCase(),
uppercase: (string) => string.toUpperCase(),
},
});
// result.length: Store<number>;
// result.lowercase: Store<string>;
// result.uppercase: Store<string>;
result.length.watch((length) => console.log('String length:', length));
result.lowercase.watch((lowercase) => console.log('lowercase:', lowercase));

Destructure object

import { createStore } from 'effector';
import { reshape } from 'patronum/reshape';
const $user = createStore({
name: 'Sergey',
lastname: 'Sova',
age: 26,
});
const { name, lastname, age } = reshape({
source: $user,
shape: {
name: (user) => user.name,
lastname: (user) => user.lastname,
age: ({ age }) => age,
},
});
name.watch((name) => console.info('name updated', name));
lastname.watch((lastname) => console.info('lastname updated', lastname));
age.watch((age) => console.info('age updated', age));
// => name updated Sergey
// => lastname updated Sova
// => age updated 26