Release v3.0.0 · ctrlplusb/easy-peasy

v3 is considered the realisation of the "final" Easy Peasy API - taking all the evolution and learning from v2 to produce a long term stable API that we will commit to supporting and will do our best to avoid breaking changes moving forward.

New Features

Hot reloading support

Hot reloading is supported via the store.reconfigure(model) API. See #168

New actionOn and thunkOn APIs

These are the new and only APIs by which to define action/thunk listeners with.

The v3 website has been updated with tutorials and API docs introducing these APIs.

We are really sorry about the churn around listener APIs! This API was driven by community feedback so feeling far better about it. 👍

Breaking Changes

Removed deprecated APIs

listen (use the new actionOn or thunkOn APIs instead)
action and thunk can no longer be configured as listeners (use the new actionOn or thunkOn APIs instead)
select (use computed instead)
selector (use computed instead)
useStore (renamed to useStoreState)
useActions (renamed to useStoreActions)
useDispatch (renamed to useStoreDispatch)
store instances have had the following properties removed:
- triggerListener
- triggerListeners
- useStoreState (import from 'easy-peasy' or use createTypedHooks for TS)
- useStoreActions (import from 'easy-peasy' or use createTypedHooks for TS)
- useStoreDispatch (import from 'easy-peasy' or use createTypedHooks for TS)

Thunks can be either asynchronous and synchronous

Using async/await or returning a Promise from a thunk will maintain its previous async behaviour.

However, if you do neither of the above your thunk will be executed synchronously. Therefore you can now get eager updates to your state if all you do is dispatch actions within your thunk. This can be handy for encapsulating logic based action dispatching.

For example

addProduct: thunk((actions, payload) => {
  switch (payload.type) {
    case 'SHOES': 
		actions.addShoe(payload);
        break;
    case 'VEGETABLE':
        // ...
  }
});

Returning immutable state from actions

If you prefer to return new immutable state from your actions, rather than mutating the state, you need to set the new disableImmer flag.

import { createStore, action } from 'easy-peasy';

const model = {
  todos: [],
  addTodo: action((state, payload) => {
    // 👇 new immutable state returned
    return [...state, payload];
  })
}

const store = createStore(model, {
  disableImmer: true // 👈 set the flag
})

Failing to disable immer may result in strange errors if you are using computed properties.

computed

In order to optimise the Typescript experience we have made a fairly small change to the computed API. If you wish to use state resolvers, these now need to be defined as the first argument.

Before

const basketModel = {
  productIds: [],
  products: computed(
    (productIds, products) => productIds.map(id => products[id]),
    [
      state => state.productIds,
      (state, storeState) => storeState.products.items
    ]
  )
};

After

const basketModel = {
  productIds: [],
  products: computed(
    [
      state => state.productIds,
      (state, storeState) => storeState.products.items
    ],
    (productIds, products) => productIds.map(id => products[id])
  )
};

Computed properties not using state resolvers remain unchanged.

useStoreState API update

useStoreState(previouslyuseStore) no longer needs/accepts the dependencies 2nd argument. Your state will get mapped correctly if they use external values, like props, within the mapState` function.

Typescript

We officially support >= [email protected]. Although we recommend using the latest version ([email protected] at the time of writing), in order to ensure you are up to date with the latest bug fixes.

Create React App users can just install [email protected] as a dev dependency and the CRA build system will use that version. You may get a warning printed to your console, however, we experienced no issues with this. 👍

Note: using a lower version of TypeScript 3.x may still work, however, you may have issues.

Hooks

You will have noted above that the useStoreState, useStoreActions, and useStoreDispatch are no longer attached to the store instance. You need to use the createTypedHooks helper instead.

import { createTypedHooks } from 'easy-peasy';
import { StoreModel } from './model';

const { useStoreActions, useStoreState, useStoreDispatch } = createTypedHooks<StoreModel>();

export default {
  useStoreActions,
  useStoreState,
  useStoreDispatch
}

Computed

The Computed type no longer requires you to define the types for state resolvers. These will automatically be inferred.