Лучший способ спроектировать вашу программу Redux

luchshij sposob sproektirovat vashu programmu

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

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

Redux – это предполагаемый контейнер состояния для приложений JavaScript.

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

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

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

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

AOXLtZSHXOg-wHn2nL-exW2QXjHCQvMnBpMv
Страница каталога
9ozwPviyKCIKwKaeEAQ6m9UK5yLtdkvXFedE
Страница продукта
-ycevoUXMQz0Br2N3u-OxfunYLfs8ueaEx93
Успешная оплата

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

Существует четыре этапа создания программы Redux:

  1. Визуализируйте дерево сословий
  2. Спроектируйте свои редукторы
  3. Совершать действия
  4. Реализация презентации

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

Из приведенных выше каркасов разработаем наше дерево сословий.

PxbfMiRBMWkyTYHpwT3hfv8sLRSCL-XeW2hb
Дерево состояния программы

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

Шаг 2: Спроектируйте свои редукторы

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

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

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

0J1lSXo1yvDLVPTyogpfNw7c1YONwwO0iqAQ
Магазин ведет вахту

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

// Root Reducer
const rootReducer = combineReducer({  
    header: headerReducer,  
    login: loginReducer,  
    footer: footerReducer,  
    common: commonReducer,  
    product: productReducer,  
    catalog: catalogReducer,  
    payment: paymentReducer
});
Корневой редуктор

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

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

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

QASD6Q8cBo1IkbTZw7LKP8sDQcbmEgRLO1TG
Дерево состояния заголовка
// Header Reducer

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

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

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

Теперь давайте разберемся, как нужно настроить файл редуктора, например searchReducer.

// 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

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

Примечание. Важно поддерживать действие RESET_SEARCH_DATA на случай, если нам понадобится сбросить данные при демонтировании компонента.

Шаг 3: Выполните действия

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

  1. Состояние загрузки -> FETCH_SEARCH_DATA
  2. Успех -> FETCH_SEARCH_SUCCESS
  3. Ошибка -> 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 является абстрактность каждого действия.

1bOAlC9gdaJZtjvLE8VbESW0m4zGX435YDLo
Поток данных в приложении Redux

Шаг 4: Реализация презентации

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

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

const Search = (props) => (  
    <SearchData     
    	search={props.search}    
		fetchSearchData={props.fetchSearchData}   
	/>
);

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

const mapDispatchToProps = {  fetchSearchData};

export default connect(mapStateToProps, mapDispatchToProps)(Search)

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

Вывод

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

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

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

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

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

  1. https://redux.js.org/
  2. https://github.com/reduxjs/redux/blob/master/examples
  3. https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.c4yhhvk0d

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

  1. https://medium.freecodecamp.org/how-to-use-redux-persist-when-migrating-your-states-a5dee16b5ead
  2. https://codeburst.io/redux-observable-to-the-rescue-b27f07406cf2
  3. https://codeburst.io/building-webapp-for-the-future-68d69054cbbd
  4. https://codeburst.io/cors-story-of-requesting-twice-85219da7172d

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *