Лучший способ архитектора вашего приложения redux

Автор оригинала: Lusan Das.

Эта статья о том, как думать в Redux. Мы постараемся понять, как мы можем использовать эту замечательную библиотеку, чтобы сделать наше приложение более стабильным, надежным и поддерживаемым. Это языковая агностика, однако мы будем держать наш объем для Redux с реагированным.

Для тех, кто не использовал Redux раньше, я буду цитировать из Документы :

Это всего лишь 2КБ библиотека, которая решает одну из самых больших проблем в поддержании крупных приложений JavaScript: государственное управление.

Эта статья не о redux, так как уже есть много статей об этом. Скорее, именно о том, как мы должны визуализировать приложение redux и эффективно использовать его.

Допустим, мы создаем приложение электронной коммерции, где у него есть некоторые основные страницы, такие как каталог, детали продукта и успех оплаты.

Ниже приведены каркасы того, как будет выглядеть приложение:

Таким образом, архитектурирование в Redux означает, что мы должны визуализировать приложение как одному объекту, и каждая страница представляет собой субъект.

Есть четыре этапа для создания приложения Redux:

Визуализировать состояние дерева
Конструкция ваших редукторов
Реализовать действия
Внедрить презентацию

Шаг 1: Визуализируйте дерево штата

От карманов выше, давайте разработаем наше государственное дерево.

Это самый важный шаг. После того, как мы сделаем визуализацию нашего государственного дерева, реализация методов Redux становится действительно легкой! Пунктирные круги – это государства, которые будут переданы приложению, твердые круги – это конкретные страницы.

Шаг 2: Дизайн своих редукторов

Если вам интересно, что именно редуктор, я буду цитировать непосредственно из документов:

Каждое из государств, которые важны, могут иметь свои собственные редукторы. Позже мы можем объединить их в одном корневом редукторе, которое в конечном итоге определит магазин (единственный источник правды приложения). Именно здесь реальная власть входит: у вас есть полный контроль над вашими государствами и их поведением. Ничто не может не развалиться в магазине. Silent Observer продолжает смотреть.

Давайте проверим пример того, как разработать редуктор с помощью дерева состояния приложения, которое мы разработали выше.

// Root Reducer
const rootReducer = combineReducer({  
    header: headerReducer,  
    login: loginReducer,  
    footer: footerReducer,  
    common: commonReducer,  
    product: productReducer,  
    catalog: catalogReducer,  
    payment: paymentReducer
});

Коренный редуктор говорит все это. Он содержит все, что магазин должен знать о приложении.

Теперь давайте посмотрим на то, как выглядит гарнитуру субъекта.

Помните, как мы разработали наше состояние заголовка?

// Header Reducer

const headerReducer = combineReducer({
    menu: menuReducer,  
    search: searchReducer,  
    location: locationReducer
});

Наш редуктор – это реплика того, что мы разработали ранее в нашем штате. Это сила визуализации.

Обратите внимание, как редуктор содержит больше редукторов. Нам не нужно создавать один огромный редуктор. Это может быть легко разбито на более мелкие редукторы, поскольку каждый удерживает свои отдельные идентичности и имеет свои специфические операции. Это помогает нам создавать разделение логики, что очень важно для поддержания больших приложений.

Теперь давайте понять, как настроить типичный файл редуктора, например поиск поиска.

// Search Reducer

const initialState = {  payload: [],  isLoading: false,  error: {}};

export function searchReducer( state=initialState, action ) { 	 
    switch(action.type) {    
        case FETCH_SEARCH_DATA:      
            return {        
                	...state,        
                    isLoading: true    
            };        
        case FETCH_SEARCH_SUCCESS:      
            return {        
	                ...state,        
                    payload: action.payload,        
                    isLoading: false      
                   };        
        case FETCH_SEARCH_FAILURE:      
            return {        
	                ...state,        
                    error: action.error,        
                    isLoading: false            
            };
                
        case RESET_SEARCH_DATA:      
            return { ...state, ...initialState }        
		default:      return state;
    }
}

Эта модель редуктора определяет возможные изменения в своем поисковом состоянии, когда вызывается поисковый API.

FETCH_SEARCH_DATA, FETCH_SEARCH_SUCCESS, FETCH_SEARCH_FAILURE, RESET_SEARCH_DATA

Все вышеперечисленные являются возможными константами, которые определяют, что возможно Действия может быть выполнен.

Шаг 3: Реализуйте действия

Каждое действие, которое имеет вызовы API, обычно проходит через три этапа в приложении.

Загрузка состояния -> fetch_search_data
Успех -> fetch_search_success
Ошибка -> fetch_search_failure

Поддержание этих типов действий помогает нам проверить поток данных, когда API вызывается в нашем приложении.

Давайте погрузимся в код, чтобы понять, как будет выглядеть типичное действие.

export function fetchSearchData(args) {  
	return async (dispatch) => {    
        // Initiate loading state    
        dispatch({      
            type: FETCH_SEARCH_DATA    
        });
        try {      
            // Call the API      
            const result = await fetchSearchData(
                args.pageCount, 
                args.itemsPerPage
            );           
            // Update payload in reducer on success     
            dispatch({        
                type: FETCH_SEARCH_SUCCESS,        
                payload: result,        
                currentPage: args.pageCount      
            });    
        } catch (err) {     
            // Update error in reducer on failure           
            dispatch({        
                type: FETCH_SEARCH_FAILURE,        
                error: err      
            });    
        }  
    };
}

Обратите внимание, как потомок данных отслеживается в магазине через действия. Это удерживает каждое изменение приложения к ответственности.

Таким образом, аналогичные действия записываются для каждого изменения в редукторах различных состояний.

Одним из самых больших преимуществ Redux является абстракция каждого и каждого действия.

Шаг 4: внедрение презентации

import React, { Component } from 'react';
import { connect } from 'react-redux';;

import fetchSearchData from './action/fetchSearchData';
import SearchData from './SearchData';

const Search = (props) => (  
    
);

const mapStateToProps = (state) => ({  
    search: state.header.search.payload
});

const mapDispatchToProps = {  fetchSearchData};

export default connect(mapStateToProps, mapDispatchToProps)(Search)

Как видите, компонент презентации очень прост и легко понять.

Вывод

Я хотел бы упомянуть некоторые из самых больших преимуществ, которые я нашел с помощью Redux:

Это, безусловно, уменьшает запах кода.
Абстракция кода легче достичь.
Redux также представляет нас другим принципам, таким как неподумность, функциональное программирование и многие другие.
Это позволяет вам визуализировать каждое действие и каждое действие и отслеживать их «Время путешествия».

Я надеюсь, что эта статья поможет вам получить более четкую картину того, почему redux по-настоящему потрясающе, и как мы можем использовать силу визуализации, чтобы сделать ремонторуемые приложения.

Следуйте за мной твиттер Чтобы получить больше обновлений в отношении новых статей и оставаться в курсе последних разработок Frontend. Также поделитесь этой статьей в Twitter, чтобы помочь другим знать об этом. Обмен – уход ^_^.

Шаг 1: Визуализируйте дерево штата

Шаг 2: Дизайн своих редукторов

Шаг 3: Реализуйте действия

Шаг 4: внедрение презентации

Вывод

Некоторые полезные ресурсы

Мои предыдущие статьи

Читайте ещё по теме: