Zarówno Redux, jak i Flux wymagają sporej ilości kodu boilerplate, aby pokryć wiele typowych wzorców, zwłaszcza tych, które wymagają asynchronicznego pobierania danych. Dokumentacja Redux ma już kilka przykładów redukcji kotłów: http://redux.js.org/docs/recipes/ReducingBoilerplate.html . możesz uzyskać wszystko, czego potrzebujesz z biblioteki Flux, takiej jak Alt lub Fluxxor, ale Redux woli wolność niż funkcje. To może być minusem dla niektórych deweloperów, ponieważ Redux przyjmuje pewne założenia dotyczące Twojego stanu, które mogą zostać nieumyślnie pominięte.

Jedynym sposobem, aby naprawdę odpowiedzieć na twoje pytanie, jest wypróbowanie Redux, jeśli możesz, być może w osobistym projekcie. Redux powstał z powodu potrzeby lepszego doświadczenia programistów i jest stronniczy w kierunku programowania funkcyjnego. Jeśli nie jesteś zaznajomiony z pojęciami funkcjonalnymi, takimi jak reduktory i kompozycja funkcji, możesz zostać spowolniony, ale tylko nieznacznie. Plusem dla tych pomysły w przepływie danych jest łatwiejsze Testowanie i przewidywalność.

Zastrzeżenie: przeniosłem się z Flummox (popularnej implementacji Flux) do Redux i plusy znacznie przewyższają wszelkie wady. Wolę dużo mniej magii w moim kodzie. Mniej magii kosztuje trochę więcej kotła, ale to bardzo niska cena.

Flux i Redux . . .

Redux nie jest czystą implementacją Flux, ale zdecydowanie inspirowaną Fluxem. Największą różnicą jest to, że używa jednego magazynu, który otacza obiekt stanu zawierający cały stan aplikacji. Zamiast tworzyć sklepy, jak to zrobisz w Flux, napiszesz funkcje reduktora, które zmienią stan pojedynczego obiektu. Ten obiekt reprezentuje cały stan w aplikacji. W Redux otrzymasz bieżącą akcję i stan oraz zwrócisz nowy stan. Oznacza to, że działania są sekwencyjne, a stan niezmienny. To doprowadza mnie do najbardziej oczywistego przekrętu w Redux (moim zdaniem).

Dlaczego Niezmienność?

Aktualizacja: jeśli to nie było wystarczająco przekonujące, obejrzyj Lee Byron doskonała rozmowa oniezmiennych interfejsach użytkownika .

Redux wymaga dyscypliny programistów za pośrednictwem bazy kodowej / bibliotek, aby utrzymać ten pomysł. Musisz upewnić się, że wybierasz biblioteki i piszesz kod w sposób nie podlegający mutacji.

Jeśli chcesz dowiedzieć się więcej na temat różnych implementacji Flux concepts (i tego, co działa najlepiej dla Twoich potrzeb), sprawdź to przydatne porównanie.

Po tym, muszę przyznać, że Redux to miejsce, w którym będzie rozwijał się js (jeśli chodzi o pisanie tych linii).

Jedną z największych korzyści w użyciu Redux w stosunku do innych alternatyw Flux jest jego zdolność do zmiany kierunku myślenia w kierunku bardziej funkcjonalnego podejścia. Gdy zrozumiesz, jak wszystkie przewody łączą się, zdasz sobie sprawę z jego oszałamiającej elegancji i prostoty w designie i nigdy nie możesz wrócić.

Wolę używać Redux , ponieważ używa jednego sklepu, który znacznie ułatwia zarządzanie stanem w porównaniu do Flux , a także Redux DevTools to naprawdę pomocne narzędzia, które pozwalają zobaczyć, co robisz ze swoim stanem z przydatnymi danymi i są naprawdę zgodne z narzędziami programistycznymi Reacta.

Również Redux ma większą elastyczność przy użyciu innych popularnych frameworków, takich jak Angular . W każdym razie, zobaczmy, jak Redux przedstawia się jako ramy.

Redux ma Trzy zasady , które mogą bardzo dobrze wprowadzić Redux i są główną różnicą między Reduxem a Flux również.

Jedno źródło prawdy

Stan całej aplikacji jest przechowywany w drzewie obiektów w jeden sklep.

To ułatwia tworzenie uniwersalnych aplikacji, jak stan z twojego serwer może być serializowany i uwodniony do klienta bez dodatkowych kodowanie. Single drzewo stanu ułatwia również debugowanie lub inspekcja aplikacji; umożliwia również utrzymanie aplikacji stan w rozwoju, dla szybszego cyklu rozwoju. Niektóre funkcjonalność, która tradycyjnie jest trudna do wdrożenia - Undo/Redo , na przykład - może nagle stać się trywialne do wdrożenia, jeśli cały twój stan jest przechowywany w jednym drzewie.

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

Stan jest tylko do odczytu

Jedynym sposobem na zmianę stanu jest emitowanie akcji, obiekt opisując, co się stało.

Gwarantuje to, że ani widoki, ani wywołania sieci nie będą nigdy nie pisz bezpośrednio do Państwa. Zamiast tego wyrażają zamiar przekształcić Państwo. Ponieważ wszystkie zmiany są scentralizowane i następują jeden po drugim w ścisłej kolejności, nie ma subtelnych warunków rasowych, aby uważaj. Ponieważ akcje są zwykłymi obiektami, mogą być rejestrowane, serializowane, przechowywane i Później odtwarzane w celu debugowania lub testowania cele.

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

Zmiany są dokonywane za pomocą czystych funkcji

Aby określić, w jaki sposób drzewo stanu jest przekształcane przez akcje, należy napisać czyste reduktory.

Reduktory są po prostu czystymi funkcjami, które przyjmują poprzedni stan i akcji i zwraca Następny stan. Pamiętaj, aby przywrócić nowy stan obiektów, zamiast mutacji poprzedniego stanu. Możesz zacząć od pojedynczy reduktor, a wraz z rozwojem aplikacji podziel ją na mniejsze reduktory, które Zarządzaj określonymi częściami drzewa stanu. Ponieważ reduktory to tylko funkcje, można kontrolować kolejność w jakiej są wywoływane, przekazują dodatkowe dane, a nawet wytwarzają reduktory wielokrotnego użytku dla typowe zadania, takie jak paginacja.

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

Aby uzyskać więcej informacji odwiedź tutaj

Redux wymaga dyscypliny w odniesieniu do niezmienności. Coś, co mogę polecić, to ng-freeze, aby poinformować Cię o przypadkowej mutacji stanu.

Z tego co wiem, redux jest inspirowany przez flux. flux jest architekturą podobną do MVC (model view controller). facebook wprowadza flux ze względu na problem skalowalności podczas korzystania z MVC. flux nie jest więc implementacją, tylko koncepcją. W rzeczywistości redux jest implementacją flux.