Using Context with Getter Methods in WordPress Interactivity API

Question

I'm working with the WordPress Interactivity API and I've encountered an issue with using context and getter methods. Here's my current code:

import { store, getContext } from '@wordpress/interactivity';

const { state, actions } = store('content-quiz', {
    state: {
        get resultMessage() {
            const context = getContext();
            const isSolved = context.selectedAnswer === context.quiz.correctAnswer ? 1 : 0;
            return isSolved ? 'Correct! Well done!' : 'Sorry, that\'s incorrect. Try again!';
        }
    },
    actions: {
        selectAnswer: (event) => {
            const context = getContext();
            context.isSubmitted = true;
            context.selectedAnswer = event.target.value;
            const isSolved = context.selectedAnswer === context.quiz.correctAnswer ? 1 : 0;
            context.resultMessage = isSolved ? 'Correct! Well done!' : 'Sorry, that\'s incorrect. Try again!';
        },
    },
});

I've noticed that many examples mix state and context, even for non-global values. I prefer to use context exclusively for local values that don't need to be shared. However, I'm facing some challenges:

The current implementation uses state for resultMessage, which I believe should be a local value in context. I want to use a getter method within the context property, similar to how it's used in state. I've tried the following approach, but it doesn't work:

store('content-quiz', {
  context: {
     get resultMessage() {
       // return ...
     }
  }
});

Emiel Zuurbier · Accepted Answer · 2024-07-12 08:47:48Z

Contexts don't have the option for getter and setter methods as their states are not initially set from the store. However, you could use the callbacks pattern in the store to act on changes in context or states.

Add a data-wp-watch attribute and set the callback as it's value.

<div
  data-wp-interactive="content-quiz"
  data-wp-context='{"isSubmitted": false, "selectedAnswer": "", "correctAnswer": "A"}'
  data-wp-watch="callbacks.resultMessage"
>
...
</div>

Now the callback will run on init and on context/state changes. So updating the context will update the text based on the state.

import { store, getContext } from '@wordpress/interactivity';

const { actions } = store('content-quiz', {
  actions: {
    selectAnswer: (event) => {
      const context = getContext();
      context.isSubmitted = true;
      context.selectedAnswer = event.target.value;
    },
  },
  callbacks: {
    resultMessage: () => {
      const context = getContext();
      const { ref } = getElement();
      const isSolved = context.selectedAnswer === context.quiz.correctAnswer;
      ref.textContent = isSolved ? 'Correct! Well done!' : 'Sorry, that\'s incorrect. Try again!';
    }
  }
});

Collectives™ on Stack Overflow

Using Context with Getter Methods in WordPress Interactivity API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related