Descoperiți JavaScript funcțional a fost numit unul dintre cele mai bune cărți noi de programare funcțională de BookAuthority!

Redux este o bibliotecă de management de stat foarte populară. Simplifică arhitectura originală Flux combinând toate magazinele și dispecerul într-un singur obiect de magazin.

Redux promovează utilizarea programării funcționale pentru gestionarea stării. Acesta introduce conceptul funcției reductor.

Flux de date

Să ne uităm la fluxul de date din interiorul magazinului Redux.

O acțiune este un obiect simplu care conține toate informațiile necesare pentru a face acțiunea respectivă.

Un creator de acțiune este o funcție care creează un obiect de acțiune.

Reductor

Un reductor este o funcție pură care ia starea și acțiunea ca parametri și returnează starea nouă.

Pot exista multe reductoare care gestionează părți ale stării rădăcină. Le putem combina împreună cu combineReducers() funcția utilitară și creați reductorul rădăcină.

Iată cum todos reductor poate arăta ca:

import matchesProperty from "lodash/matchesProperty";
function todos(todos = [], action) {
 switch (action.type) {
  case "add_todo":
    const id = getMaxId(todos) + 1;
    const newTodo = { ...action.todo, id };
    return todos.concat([newTodo]);
  case "remove_todo":
    const index = todos.findIndex(matchesProperty("id",
                                  action.todo.id));
    return [...todos.slice(0, index), ...todos.slice(index + 1)];
  case "reset_todos":
    return action.todos;
  default:
    return state;
  }
}
export default todos;

state în acest caz este lista sarcinilor. Ne putem aplica acțiunilor sale, cum ar fi add_todo, remove_todo, reset_todos.

Reductor prin convenție

Aș vrea să scap de switch declarație în reductor. Funcțiile ar trebui să fie mici și să facă un lucru.

Să împărțim reductorul în mici funcții pure cu nume care se potrivesc tipurilor de acțiune. Voi numi aceste funcții setter. Fiecare dintre ele ia starea și acțiunea ca parametri și returnează starea nouă.

function remove_todo(todos, action) {
  const index = todos.findIndex(matchesProperty("id",
                                action.todo.id));
  return [...todos.slice(0, index), ...todos.slice(index + 1)];
}

function reset_todos(todos, action) {
  return action.todos;
}

function add_todo(todos, action) {
  const id = getMaxId(todos) + 1;
  const newTodo = { ...action.todo, id};
  return todos.concat([newTodo]);
}

acțiuni redux

Aș dori să combin toate aceste mici funcții împreună pentru a crea funcția originală de reducere. Putem folosi handleActions() funcție utilitară din acțiuni redux pentru asta.

import { handleActions } from "redux-actions";

const reducer = handleActions(
  { remove_todo, reset_todos, add_todo },
  []
);

export default reducer;

Funcțiile setter vor rula prin convenție. Când o acțiune cu tip remove_todo intră, remove_todo() funcția setter va fi executată.

Iată exemplul de cod de pe codesandbox.

Descoperiți JavaScript funcțional a fost numit unul dintre cele mai bune cărți noi de programare funcțională de BookAuthority!

Pentru mai multe despre aplicarea tehnicilor de programare funcționale în React, aruncați o privire Reactie functionala.

Învăța funcțional React, într-un mod bazat pe proiecte, cu Arhitectură funcțională cu React și Redux.

Urmăriți pe Twitter