Cannot assign other store action to property

[IgorTakacs]

Hi all,

My problem is the following:

const someModel = {
  propertyA: null,

  setPropertyA: action((state, payload) => {
    const { someFunction } = payload;
    state.propertyA = () => someFunction();
  }),

  callPropertyA: action(state => {
    state.propertyA();
  }),

  someListener: thunkOn(
    (_, storeActions) => storeActions.otherModel.otherAction,
    (actions, target) => {
      const { someFunction } = target.payload;
      /**
       * Some code
       */
      actions.setPropertyA({ someFunction });
      /**
       * Some code
       */
    },
  ),

  someThunk: thunk(actions => {
    /**
     * Some code
     */

    actions.callPropertyA();

    /**
     * Rest of code
     */
  }),
};

When executing the above, I get the error:
Error in @thunk.randomModel.someAction(start)
[TypeError: Cannot read property 'reportError' of undefined]

Note: someFunction that we get is another store action that has parameters.
i.e.:

const someAction = useStoreActions(actions => actions.randomModel.someAction);
someFunction: () => someAction(params);

Note: If I were to call the someFunction like someFunction(), right in the store where I'm setting it to propertyA, everything would work.

Anyone know how to fix this?

Thank you in advance!
Best wishes

[jmyrland]

Hi @IgorTakacs !

You are assigning a function to your model state (propertyA in your example). This is not supported - state should only consist of "serializable" data, e.g. primitives or plain JS objects.

Is there any perticular reason you want to have a function as state? What are you trying to achieve? Maybe there could be another solution to your problem.

Note: someFunction that we get is another store action that has parameters.

Instead of assigning the action to state, you could resolve the action from another model within the someThunk-thunk via the getStoreActions helper, e.g.:

  someThunk: thunk((actions, payload, { getStoreActions }) => {
   

    /**
     * Some code
     */
    const { someAction } = getStoreActions().randomModel;
    someAction();

    /**
     * Rest of code
     */
  }),

Another way, would be to either register a thunkOn or actionOn within randomModel to trigger when someThunk is invoked.

[IgorTakacs]

@jmyrland Thank you for your answer!

What I have found funny is, that the approach above worked when I was passing a function that wasn't a store action.

The functionality I was trying to achieve, is related to a "delete - undo delete" feature.

1. Press delete -> item gets deleted (list gets filtered)
2. At the same time, a timeout starts that delays the actual request to the BE to remove the item from the DB
3. Press delete on another item before the timeout has ended
4. The timeout needs to be cleared, the first request needs to be sent and then a new timeout should be started for the second item

The above also needs to be somewhat reusable, because I'm dealing with a variety of different types of items... (all with different actions, parameters and endpoints)

someFunction actually gets passed as a parameter to send the request;
The original action that gets someFunction as the parameter is the functionality performing step number 2 from the list.

Nevertheless, I was trying to avoid having to need to switch the whole paradigm, because that would require extra work on the project, but guess that's what I'll be doing.

Thank you once again for the clarification!
Best wishes

[jmyrland]

The functionality I was trying to achieve, is related to a "delete - undo delete" feature.

Ah, I see. This library might help you https://github.com/mighdoll/undo-peasy
Here's the related discussion: #533

[no-stack-dub-sack]

closing as resolved