Redux срещу Vuex:

Тази седмица публикацията ще бъде малко по-различна от обичайните публикации за седмичните посещения в Codesmith. Промяната е, защото тази седмица е свързана с идеята за продуцентски проект, над който аз и двамата колеги работим. Всички сме много развълнувани от една рамка, която привлече много внимание през изминалата година, Vue. Чел съм много за разликите между Vue и други рамки, но също така ми беше любопитно как различните библиотеки за управление на държавата работят с Vue. Реших, че може би е хубаво да се запозная малко с разликите между Redux и Vuex, официалната държавна библиотека за управление на Vue, и да споделя моите открития.

Ето ни:

Redux е рамкова библиотека за агностично управление на държавата. Ако мислите да изпробвате Vue или вече използвате Vue с Redux, Vuex вероятно е по-добра библиотека за управление на държавата за поддържане на производителността, Ето някои неща, които трябва да знаете за двете, така че можете да сравните:

Redux:

Действия:

Redux разчита на действия: обекти със свойство „type“ и минималния брой други свойства и стойности, необходими за обяснение на действието. Единственият начин да манипулирате състоянието си е да използвате метода store.Dispatch (), който приема тип (обект на действие) и полезен товар (който изпраща данни от приложението ви до вашия магазин). Ако действието не бъде разпознато и не се изпрати промяна, държавата е по подразбиране към старото състояние.

Редуктори:

Редукторите са чисти функции (с чисти функции можете да гарантирате, че един и същ вход винаги ще доведе до един и същ изход и не мутира входа или създава някакви странични ефекти), които се използват за прилагане на начина, по който следващото състояние се изчислява от текущото състояние и действието.

Всеки редуктор управлява собствената си част от глобалната държава. Логиката на състоянието може да се управлява чрез разбиване на вашите редуктори, за да съответстват на по-малки под-части на състояние. След това тези редуктори могат да се комбинират с един коренов редуктор, за да управлявате всички състояния на вашите приложения. Магазинът редукс запазва пълното дърво на състоянието, върнато от кореновия редуктор.

Магазин:

Магазинът е единственият източник на истина и държи цялото дърво на държавата. В интерес на истината, това е просто обект. За да промените състоянието, трябва да изпратите действие към него. В Redux има само един магазин и една функция за намаляване на корен, подобно на това да има корен компонент в React. Никога не добавяте магазин, а само разделяте кореновия редуктор на по-малки редуктори, които работят в различни части на вашето дърво. Можете да добавите слушател на промяна, наречен Абониране, за да проверите по всяко време дадено действие да бъде „изпратено“ и вашето дърво на състоянието може да се е променило.

FYI, можете да обвържете Redux и Vue.js, просто имайте предвид, че според някои не е задължително най-подходящото за Vue.js. Това е така, защото Redux замества състоянието на обекта при всяка актуализация. Въпреки че Redux е рамков агностик, той е създаден с React в предвид. React е различен от Vue по начина, по който обработва актуализации: React прави виртуален DOM, след което изчислява най-оптималните DOM операции, за да може настоящият DOM да съответства на новия Virtual Dom. Но няма начин да се знае дали определен компонент трябва да се рендерира или не въз основа на новите данни. Инстанциите Vue следят от кои битове данни зависят от тях за рендериране. Тези случаи автоматично регистрират това, което трябва да се рендерира при промяна на данните.

VUEX:

Подобно на Redux, Vuex също е вдъхновен от Flux. Въпреки това, за разлика от Redux, Vuex мутира състоянието, а не прави състоянието му неизменно и го заменя изцяло като функциите на Redux за редуктор.

Това позволява Vue.js автоматично да знае кои директиви трябва да бъдат рендерирани, когато състоянието се промени. Вместо да разбие логиката на състоянието със специализирани редуктори, Vuex е в състояние да организира своята логика на състоянието с магазини, наречени модули.

Мутациите:

Вместо действия, единственият начин да промените дървото на държавата във Vuex е с мутации. Мутациите изискват тип и манипулатор. Типът е име на низ, който действа като ключ, а обработващият е функция на тялото. Мутациите могат да бъдат присвоени на модули със съответния отрязък от състоянието. За малките приложения това може да изглежда досадно, но предимствата са, че (особено за по-големите приложения) ще имате едно място, където ще можете да видите всички възможни начини, които държавата може да промени. Това прави отстраняването на грешки много по-удобно. Също така имайте предвид, че те винаги са синхронни, за да се гарантира, че състоянието не зависи от времето и реда на непредсказуеми (асинхронни) събития.

Действия:

Във Vuex имаме и действия: това са функции, които изпращат (предават промени в магазина) нашите мутации. Те могат да бъдат асинхронни и да получат екземпляра на магазина като първи аргумент.

Действията не мутират състоянието директно, а само ангажират мутациите. Те могат да се използват и за извършване на асинхронни промени в състоянието. Имайте предвид, че действията поддържат същия формат на полезен товар и изпращане в обектния стил като мутации (т.е. вашите аргументи за изпращане изглеждат същите като в комит).

Магазин:

Подобно на Redux, Vuex също има магазин. Това е центърът на всяко приложение на Vuex. Този магазин съхранява цялото състояние, но не е като обикновен глобален обект. Магазините на Vuex са различни, защото когато компонентите получават състояние от магазина, тези компоненти могат реактивно и ефективно да се актуализират „всеки път, когато състоянието на магазина се промени. Състоянието на магазина може да бъде променено само чрез извършване на мутации.

Като цяло Vuex наистина е създаден, за да се възползва от това, което прави Vue уникална. Но за всеки, който мисли да се премести над Vue, има предостережение. От една страна, Vue все още няма подкрепа, ресурси и широко разпространение на други рамки като React. След като каза това, Vue полага сериозни усилия да разполагате с много функционалност веднага, така че да стартирате проекта си е по-лесно опит от настройването с React.