Accesează state ul dintr un reducer în alt reducer

Limbaje de Programare JavaScript / Node
, ,
1


Cum fac să accesez searchList care e declarat în reducer ul searchListReducer.js și să-l folosesc în reducer ul passSelectedFoodReducer.js ?
Am încercat să folosesc const initialState = {searchList: []} pe care să-l trimit ca al 2-lea parametru la createStore() dar fără rezultat.
Am citit și aticolul acesta dar nu am înțeles nimic din el, https://itnext.io/passing-state-between-reducers-in-redux-318de6db06cd

1 Like
2

De ce ai nevoie de date in acel reducer si mai exact de ce date?

E posibil sa ai o structura care nu te avantajeaza in ceea ce vrei sa faci.
action-ul care face trigger la reducer ar trebui sa-i dea datele de care are nevoie, nu sa le preiei in reducer.

1 Like
3

Sidenote:

in actions/types.js creaza-ti o conventie, momentan ai:

...
POPULATE_SEARCH_LIST_ERROR
SAVE_SELECTED_FOOD
POPULATE_FOOD_CARD_START
...

Cum este conventia B.E.M. (block-element-modifier), creaza-ti o conventie si las-o ca si comment in fisier, ca exemplu:

types.js

/* Convention:  context__action__state  (state is optional)*/

export const FOOD_SEARCH__POPULATE__ERROR = "...";
export const FOOD_WISHLIST__SAVE = "...";
export const FOOD_CARD__FETCH__START = "...";
export const FOOD_CARD__FETCH__SUCCESS = "...";
1 Like
4

In redux thunk ai acces la state-ul global in actions prin functia getState pe care poti sa-l pasezi mai departe, cum e in exemple:

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}

In principiu ar trebui sa grupezi functionalitatile asemanatoare intr-un store comun (nu prea are rost sa faci store separat pentru fiecare element).

2 Likes
5

Ce am înțeles din conveția de mai sus:

  • state ~ se referă la faptul că fac ceva modificare pe o valoare din state?
  • action ~ este numele acțiunii?
  • context ~ nu știu la ce se referă
6

Cred ca am inteles gresit cum ai gandit denumirile si nu am dat cel mai bun exemplu.

Hai sa luam Atom ca exemplu, are un sistem de commands cu urmatoare conventie: namespace:action.

Command names must follow the namespace:action pattern, where namespace will typically be the name of your package, and action describes the behavior of your command.

Daca ar fi sa implementam redux actions pt. ceva similar, am face ceva de genu:

/* convention: namespace__action */

EDITOR__INSERT_CHARACTER_AT
EDITOR__FOLD_CURRENT_ROW
EDITOR__MOVE_TO_FIRST_CHARACTER_OF_LINE
…
USER__INSERT_DATE
USER__UPDATE_SETTINGS

namespace este contextul in care s-a rulat actiunea. Daca sunt in panoul de “user settings” si apas “Save settings” se face trigger la USER__UPDATE_SETTINGS.

Sa presupunem ca ai adaugat multa functionalitate pe partea de user si panoul de “user settings” a devenit mai complex, mai are 2 servicii care amandoua au un tab de settings:

  • collaboration
  • hosting

Ai varianta de USER__UPDATE_HOSTING_SETTINGS sau mai adaugi o conventie: service.

/* convention: namespace__service__action (service is optional) */

EDITOR__INSERT_CHARACTER_AT
EDITOR__FOLD_CURRENT_ROW
EDITOR__MOVE_TO_FIRST_CHARACTER_OF_LINE
…
USER__INSERT_DATE
USER__UPDATE_SETTINGS
…
USER__HOSTING__UPDATE_SETTINGS
USER__HOSTING__TEST_API_KEY

namespace / service / action / command / etc - sunt doar cuvinte care specifica conventia folosita, nu trebuie sa-l folosesti pe vreunul undeva, trebuie sa notezi ce are sens pt. tine ca dezvoltator sau echipa.

Are sens?

2 Likes
7

Da, are semnificație începând de acum.

8

De data asta am o eroare de funcționalitate: dacă aleg mai multe alimente din lista, ultimul aliment selectat le suprascrie pe cele anterior selectate.
Și nu-mi dau seama ce fac greșit…
Varianta nouă de cod e în același codesandbox, postat sus.

9

Am rezolvat și ultima problemă.
connect() face subscribe la schimbările store ului si astfel celelalte <Card /> uri deja selectate erau suprascrise. Soluția a fost să stochez datele după ndbno (id-ul unic).