React-Redux pytanie

Question

Witam, zaczynam przygode z reduxem i mam jedno pytanie. Powiedzmy ze w stanie mam stringa, na którym musze wykonac kilka wlasnych funkcji zeby byl gotowy do wyswietlenia. W react wystaarczylo napisac te funkcje w komponencie potem je wywolac i ustawic nowy stan. Natomiast nie zabardzo rozumiem jak to powinno wygladac z uzyciem reduxa. Czy te wszystkie funkcje powinienem napisac w switchu reducera i zwrocic nowy stan, czy moze napisac je w pliku z reducerem a w reducerze tylko wywolac,czy moze jeszcze gdzies indziej?Mam nadzieje ze rozumiecie o co mi chodzi;-)

Answer 1

O ile dobrze zrozumiałem, to chcesz w `state` przechowywać jakiś `string` na bazie, którego tworzysz jakiś tekst do wyświetlenia (np. coś w stylu w `state` przechowujesz `heroName`, a generujesz tekst `The greatest of the heroes: ${heroName}`).

Przechowywanie stanu (w miarę możliwości) w najprostszej postaci jest dobrą praktyką. Operacje przekształcenia go do oczekiwanej postaci (patrz wyżej) wato umieścić w `mapStateToProps`. Dodatkowo możesz utworzyć specjalną funkcję (tzw. selector), która będzie wywoływana wewnątrz `mapStateToProps` i będzie transformować stan do oczekiwanej postaci.

W tym przykładzie w `state` przechowujemy `heroName`, `selector`em jest funkcja `getHeroDescription`, a tworzoną wartością jest `description`.

const mapStateToProps = state => {
  return {
    description: getHeroDescription(state.heroName)
  };
};

IMHO ten proces jest fajnie opisany na Type of Web - React + Redux - filtrowanie listy, proste selektory

Materiały o `selector`ach w Redux:

• Computing Derived Data
• Connect: Extracting Data with mapStateToProps

Comments

Dzieki za odpowiedz, ale nie do konca o to mi chodzi. W moim przypadku musze wykonac pare własnych funkcji na stringu który siedzi w stanie a nastepnie ustawic nowy stan na podstawie wyniku tych funkcji. Takze dochodze do wniosku ze skoro zmieniam stan to transformacja tego stringa powinien zajac sie reducer?Np przesylam mu akcje z typem TRANSFORM_STRING oraz payload:state.string...dobrze kombinuje?;-)

---

Tak, za operację przekształcenia istniejącego stanu do nowego stanu odpowiada `reducer`.  Jeżeli działasz tylko na `string`u, który jest jednocześnie obecnym stanem, to nie musisz przesyłać tego `string`u w `payload`. `Payload` możesz wykorzystać do przekazania wartości, która wpływa na nowy stan (np. litera dodawana do obecnego `string`a).

W tym przykładzie zwiększamy `amount` o pewną wartość `value`. `amount` jest przechowywana w stanie, a `value` jest `payload`em.

// action creator
export const increaseAmount = (value) => ({
  type: 'AMOUNT_INCREASED',
  value
});

// reducer
export const amount = (state = 0, action) => {
  switch (action.type) {
    case 'AMOUNT_INCREASED':
      return state + action.value
    default:
      return state
  }
}

Jeżeli cały ten proces przekształcania `string`a jest dość skomplikowany, warto pomyśleć o wydzieleniu z `reducer`a funkcji odpowiadających za te transformacje, ale to już chyba wiesz ;)

Warte uwagi artykuły:

• Refactoring Reducer Logic Using Functional Decomposition and Reducer Composition
• How Redux Works: A Counter-Example