Types d'actions dynamiques Redux Saga?

Pourquoi n'utilisez-vous pas la charge utile pour cela! exemple:

export const sampleAction = (key) => {
    return {
        type: SETTINGS.ACTION_CHANGE,
        payload:{key}
    };
};

Vous pouvez essayer de cette façon

export default (state = initialState, action) {
  switch (`${action.type}${action.payload}` ) {
    case `${SETTINGS.ACTION_CHANGE}${action.payload}`:
      return {your new state}
    default:
      return state
  }
}

Votre réducteur

export const sampleAction = (key) => {
  return {
      type: SETTINGS.ACTION_CHANGE + key,
      payload: key
  };
};

Honnêtement, je pense que vous vous compliquez un peu trop. J'ai un peu la même situation dans la page des paramètres de mon application où j'ai plusieurs paramètres qui peuvent être activés ou désactivés.

Ce que vous voulez faire n'est pas vraiment possible. Prends ton exemple

function* settingOne(action) {
    // Do stuff for setting 1.
}

export function* sagas() {
    yield takeLatest(SETTING_1, settingOne);
 }

À quoi ressemblera votre réducteur? Cela ne peut pas être le case SETTINGS.ACTION_CHANGE + key Quelle clé?

Donc, je ne vois que deux solutions pour votre cas d'utilisation. Vous pouvez envoyer une seule action avec une charge utile, comme quelqu'un déjà mentionné, mais alors votre saga ressemblerait à

function* saga(action) {
    if (action.payload === 'SETTING_1') {
        yield put({ type: SETTING_1 });
    }
}

function* settingOne(action) {
    // Do stuff for setting 1.
}

export function* sagas() {
    yield takeEvery(SETTING.ACTION_CHANGE, saga);
    yield takeLatest(SETTING_1, settingOne);
}

Mais maintenant que vous avez un problème, vous ne pouvez pas faire la combinaison avec takeEvery et takeLatest comme vous l'auriez souhaité, car peu importe le paramètre activé ou désactivé par l'utilisateur, il reste le même type d'action et toujours la même saga qui se déroule.

Donc, une solution à cela serait quelque chose de ce qui suit:

function* saga(action) {
    if (action.payload === 'SETTING_1') {
        // Do stuff for that setting.
    }
}

export function* sagas() {
    yield takeEvery(SETTING.ACTION_CHANGE, saga);
}

Maintenant que vous faites exactement ce que vous vouliez, vous utilisez takeEvery pour chaque clic de commutateur, mais si le même commutateur a été cliqué plusieurs fois, alors le takeLatest se met en place.

Alors, qu'est-ce qui pourrait bien être mal avec cela? Eh bien, en fait, vous n'avez plus de clés dynamiques, le paramètre est passé dans la charge utile et vérifié dans la saga principale, puis une autre saga fonctionne sur cette base.

Ce qui signifie, quelle serait la meilleure façon à mon avis. Oubliez les choses dynamiques (je sais que vous voulez avoir moins d'actions, et ainsi ...) et restez simple, comme ceci:

export const sampleAction = (key) => {
    return {
        type: SETTINGS.ACTION_CHANGE + key
    };
};

Fondamentalement, distribuez une action unique avec un type unique pour chaque paramètre et utilisez takeLatest pour gérer le takeLatest rapide sur le même paramètre.

J'espère que ce genre de clarifiera pourquoi les types d'actions dynamiques ne fonctionneront pas. Au moins c'est ce que je sais, peut-être qu'il y a un moyen dont je n'ai pas entendu parler :)

Je viens de rencontrer ce problème et j'ai trouvé une solution élégante comme mentionné ici: https://github.com/redux-saga/redux-saga/issues/694#issuecomment-266702056 par le mainteneur.

import { channel } from 'redux-saga';
import { put, select, take, takeLatest} from 'redux-saga/effects';

    function* watcherSaga() {
      const map = {};
      while (true) {
        const action = yield take(SETTINGS.ACTION_CHANGE);
        const { key } = action;
        if (!map[key]) {
          map[key] = channel();
          yield takeLatest(map[key], workerSaga);
        }
        yield put(map[key], action);
      }
    }