Puis-je dispatcher une action dans le reducer ?

Question

Est-il possible de dispatcher une action dans un reducer lui-même ? J'ai une barre de progression et un élément audio. L'objectif est de mettre à jour la barre de progression lorsque l'heure est mise à jour dans l'élément audio. Mais je ne sais pas où placer l'eventhandler ontimeupdate, ni comment envoyer une action dans le callback de ontimeupdate, pour mettre à jour la barre de progression. Voici mon code :

//reducer

const initialState = {
    audioElement: new AudioElement('test.mp3'),
    progress: 0.0
}

initialState.audioElement.audio.ontimeupdate = () => {
    console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration);
    //how to dispatch 'SET_PROGRESS_VALUE' now?
};

const audio = (state=initialState, action) => {
    switch(action.type){
        case 'SET_PROGRESS_VALUE':
            return Object.assign({}, state, {progress: action.progress});
        default: return state;
    }

}

export default audio;

Answer 1

Lancer un autre envoi avant que votre réducteur soit terminé est un anti-modèle. car l'état que vous avez reçu au début de votre réducteur ne sera plus l'état actuel de l'application lorsque votre réducteur se terminera. Mais La programmation d'un autre envoi à partir d'un réducteur n'est PAS un anti-modèle. . En fait, c'est ce que fait le langage Elm, et comme vous le savez Redux est une tentative d'apporter l'architecture Elm à JavaScript.

Voici un middleware qui va ajouter la propriété asyncDispatch à toutes vos actions. Lorsque votre réducteur a terminé et renvoyé le nouvel état de l'application, asyncDispatch déclenchera store.dispatch avec n'importe quelle action que vous lui donnez.

// This middleware will just add the property "async dispatch" to all actions
const asyncDispatchMiddleware = store => next => action => {
  let syncActivityFinished = false;
  let actionQueue = [];

  function flushQueue() {
    actionQueue.forEach(a => store.dispatch(a)); // flush queue
    actionQueue = [];
  }

  function asyncDispatch(asyncAction) {
    actionQueue = actionQueue.concat([asyncAction]);

    if (syncActivityFinished) {
      flushQueue();
    }
  }

  const actionWithAsyncDispatch =
    Object.assign({}, action, { asyncDispatch });

  const res = next(actionWithAsyncDispatch);

  syncActivityFinished = true;
  flushQueue();

  return res;
};

Maintenant, votre réducteur peut le faire :

function reducer(state, action) {
  switch (action.type) {
    case "fetch-start":
      fetch('wwww.example.com')
        .then(r => r.json())
        .then(r => action.asyncDispatch({ type: "fetch-response", value: r }))
      return state;

    case "fetch-response":
      return Object.assign({}, state, { whatever: action.value });;
  }
}

Answer 2

L'envoi d'une action dans un réducteur est un anti-modèle. . Votre réducteur ne doit pas avoir d'effets secondaires, il doit simplement digérer la charge utile de l'action et renvoyer un nouvel objet d'état. L'ajout de récepteurs et la répartition des actions dans le réducteur peuvent entraîner des actions en chaîne et d'autres effets secondaires.

On dirait que votre initialisation AudioElement et l'écouteur d'événement appartiennent à un composant plutôt qu'à un état. Dans l'écouteur d'événements, vous pouvez envoyer une action, qui mettra à jour progress dans l'État.

Vous pouvez soit initialiser le AudioElement dans un nouveau composant React ou simplement convertir cette classe en un composant React.

class MyAudioPlayer extends React.Component {
  constructor(props) {
    super(props);

    this.player = new AudioElement('test.mp3');

    this.player.audio.ontimeupdate = this.updateProgress;
  }

  updateProgress () {
    // Dispatch action to reducer with updated progress.
    // You might want to actually send the current time and do the
    // calculation from within the reducer.
    this.props.updateProgressAction();
  }

  render () {
    // Render the audio player controls, progress bar, whatever else
    return <p>Progress: {this.props.progress}</p>;
  }
}

class MyContainer extends React.Component {
   render() {
     return <MyAudioPlayer updateProgress={this.props.updateProgress} />
   }
}

function mapStateToProps (state) { return {}; }

return connect(mapStateToProps, {
  updateProgressAction
})(MyContainer);

Notez que le updateProgressAction est automatiquement entouré de dispatch de sorte que vous n'avez pas besoin d'appeler directement la répartition.

Answer 3

Vous pouvez essayer d'utiliser une bibliothèque comme redux-saga . Il permet de très Une façon propre de séquencer des fonctions asynchrones, de déclencher des actions, d'utiliser des délais et plus encore. C'est très puissant !

Answer 4

redux-loop s'inspire d'Elm et fournit ce modèle.

Answer 5

Le dispatching et l'action à l'intérieur du réducteur semble être un bug.

J'ai fait un simple exemple de compteur en utilisant useReducer si "INCREASE" est distribué, alors "SUB" l'est aussi.

Dans l'exemple que je prévoyais, "INCREASE" est distribué, puis "SUB" l'est aussi, ainsi que "set". cnt à -1 et ensuite poursuivre l'action "INCREASE" pour définir cnt à 0, mais c'était -1 ("INCREASE" a été ignoré)

Regardez ça : https://codesandbox.io/s/simple-react-context-example-forked-p7po7?file=/src/index.js:144-154

let listener = () => {
  console.log("test");
};
const middleware = (action) => {
  console.log(action);
  if (action.type === "INCREASE") {
    listener();
  }
};

const counterReducer = (state, action) => {
  middleware(action);
  switch (action.type) {
    case "INCREASE":
      return {
        ...state,
        cnt: state.cnt + action.payload
      };
    case "SUB":
      return {
        ...state,
        cnt: state.cnt - action.payload
      };
    default:
      return state;
  }
};

const Test = () => {
  const { cnt, increase, substract } = useContext(CounterContext);

  useEffect(() => {
    listener = substract;
  });

  return (
    <button
      onClick={() => {
        increase();
      }}
    >
      {cnt}
    </button>
  );
};

{type: "INCREASE", payload: 1}
{type: "SUB", payload: 1}
// expected: cnt: 0
// cnt = -1