Нужно ли рефакторить код?

Question

[xenonhammer]

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

reducer

import { ADD_IN_FAVORITE, DEL_FROM_FAVORITE, GET_FAVORITES } from "../types"

const initialState = {
    favoriteData: {},
    countOfFavorites: 0
}

export default function favorite ( state = initialState, action){
    if(action.type === ADD_IN_FAVORITE){

        for(let key in state.favoriteData){
            if(state.favoriteData[key].id === action.data.id){
                return state
            }
        }
        
        localStorage.setItem(action.data.id, JSON.stringify(action.data))
        let newState = {...state}
        newState.favoriteData[action.data.id] = action.data

        newState.countOfFavorites = Object.keys(newState.favoriteData).length

        return newState
    
    }else if(action.type === DEL_FROM_FAVORITE){
        
        
        localStorage.removeItem(action.data.id)
        let newState = {...state}
        delete newState.favoriteData[action.data.id]

        newState.countOfFavorites = Object.keys(newState.favoriteData).length

        return  newState 

    }else if(action.type === GET_FAVORITES){
        
        let newState = {...state}
        
        Object.keys(localStorage).map(elem => {
            newState.countOfFavorites++
            newState.favoriteData[JSON.parse(elem)] = JSON.parse(localStorage.getItem(elem))
            return newState
        })
        
        return newState
    }else{
        return state
    }

}

А так выглядит компонент :

conponent

import React from 'react';
import './main-board.css';
import { connect } from 'react-redux';
import { HIDE_SEARCH_BOARD, SHOW_SEARCH_BOARD, HIDE_FAVORITES_BOARD, SHOW_FAVORITES_BOARD, UP_SORTING, DOWN_SORTING, STOP_SORTING } from '../redux/types';


class MainBoard extends React.Component{
  render(){

    const isVisibleSearchBoard    = this.props.visibleSearchBoard
    const isSortToPrice           = this.props.sortToPrice
    
    const isVisibleFavoritesBoard = this.props.visibleFavoritesBoard
    
    return(

        <section className="main-sec">
        <div className="main-board">
            <div className="main-logo">
                
                <a href="/" alt="Агрегатор бирж фрилансров" className="">
                    <div className="logo-title"><span>Freelace</span> Board</div>
                    <div className="line"></div>
                    <h1 className="h1">Агрегатор бирж фрилансров</h1>
                </a>

            </div>
            <div className="main-menu">
                <div className="menu-boxs">
                    <button 
                        className="box"
                        >
                    </button>

                    <button 
                        onClick   = {() => {
                            if(isVisibleSearchBoard){
                                this.props.searchBoard(HIDE_SEARCH_BOARD)
                            }else{
                                this.props.searchBoard(SHOW_SEARCH_BOARD)
                                this.props.favoritesBoard(HIDE_FAVORITES_BOARD)
                            }
                        }}
                        className = { isVisibleSearchBoard ? "box active-box" : "box" }
                        >
                    </button>

                    <button 
                        onClick   = {() =>{ 
                            this.props.sorting(UP_SORTING)
                            if(this.props.sorting && this.props.sortingStep === 1) return this.props.sorting(DOWN_SORTING)
                            else if(this.props.sorting && this.props.sortingStep === 2) return this.props.sorting(STOP_SORTING)
                            }}
                        className = { isSortToPrice? "box active-box" : "box" }
                        >
                        <span 
                            className = "sort-wrap"
                        >
                            <span className = { this.props.sortingStep === 1 ? "sort-up sort-active" : "sort-up"}
                            ></span>
                            <span className = { this.props.sortingStep === 2 ? "sort-down sort-active" : "sort-down"}
                            ></span>
                        </span>
                    </button>
                    <button 
                        
                        className="box"
                        >
                    </button>
                    <button 
                        onClick   = {() => {
                            if(isVisibleFavoritesBoard){
                                this.props.favoritesBoard(HIDE_FAVORITES_BOARD)

                            }else{
                                // this.props.getFavoritesLocalStorage()
                                this.props.favoritesBoard(SHOW_FAVORITES_BOARD)
                                this.props.searchBoard(HIDE_SEARCH_BOARD)
                            }
                        }}
                        className = { isVisibleFavoritesBoard ? "box favorite-btn active-box" : "box favorite-btn" }
                        > 
                        {this.props.countOfFavorites > 0 && 
                        <span className = "count-wrap">
                            <span className = "count-favorite">{this.props.countOfFavorites}</span>
                        </span>}
                        
                    </button>
                </div>
            </div>
        </div>
    </section>

    )
  }

}
export default connect(
    state => ({
        visibleSearchBoard:    state.searchBoard.visibleSearchBoard,
        visibleFavoritesBoard: state.favoritesBoard.visibleFavoritesBoard,
        sortToPrice:           state.sorting.sortToPrice,
        sortingStep:           state.sorting.sortingStep,
        countOfFavorites:      state.favorite.countOfFavorites
    }),
    dispatch => ({
        searchBoard: (type) => {
            dispatch({ type })
          },
        favoritesBoard: (type) => {
            dispatch({ type })
        },
        sorting: (type) => {
            dispatch({ type })
        }
    })
) (MainBoard)

Я бы не заморачивался, работает и работает. Но, поймите правильно, это моё первое приложение и я хочу устроиться работать по этому направлению на джуна. Мне нужен проект в портфолио, по этому прошу поделиться мнение, друзья. Я человек не умный, пожалуйста, учитывайте это при вашем отклике :)

Answer 1

[Дмитрий]

Большинство программистов, в том числе те, кто будет вас собеседовать - как мартышки, им сказали что правильно так и так, они не задумываясь передают это дальше и бьют по голове каждого, кто осмеливается делать не по шаблону. Вся эта возня с экшинами и типами безусловно избыточна в редаксе в 95% случаев. Я вообще делал надстройку, чтобы напрямую вызывались процедуры, изменяющие стейт. Хотя не рискнул бы выложить это в качестве портфолио, по упомянутым выше причинам.

В самом вашем коде ничего плохого нет, вы можете оставить его, в комментариях пояснив, что вынос экшинов в отдельный файл в данном случае ведет к избыточному бойлерплейту. Единственное все же нагляднее, если mapStateToProps и MapDispatchToProps вынесены на верх, а не вставлены в коннект непосредственно.

Comments

[xenonhammer]

Спасибо, очень интересно !

Answer 2

[Дима Паутов]

Рефакторинг ради рефакторинга - это зло и пустая трата времени!
Чаще всего это усложняет понимание того когда, который есть.
Рефакторинг должен быть осмысленный, направленный на решение задачи.

Я бы не заморачивался, работает и работает.

Отлично, пиши следующее исходя из ошибок в прошлом. Так и учатся!

Но, поймите правильно, это моё первое приложение и я хочу устроиться работать по этому направлению на джуна.

От того, что у тебя есть 1 приложение, толку никакого и от того, что это твоё 1е приложение никто не сжалится над тобой. Этого очень мало...
Пиши ещё, ещё, и ещё. Сделай хотя бы 3, от простого TODO, блога, каталога чего либо и т.п. Изучай готовые репозитории с простыми сайтиками, ютюб, где люди пишут какие-то блоги, каталоги.

Мне нужен проект в портфолио

На мой взгляд, класть в портфолио первые работы, ну такое себе. На твоё портфолио по умолчанию будут смотреть люди, которые уже ждут там крутые работы, а на деле там твои пробнички, кому они интересны? С чего они должны заинтересовать потенциального заказчика или работодателя?)))

Comments

[xenonhammer]

Разве первая работа не может быть крутой? :)

[uRoot]

Мой опыт показывает, что многим вообще плевать на твой гитхаб и твои пет-проекты. В портфолио есть и то, и другое, но никто не поинтересовался даже.

Это скорее просто способ попробовать что-то в работе

[Дима Паутов]

xenonhammer, конечно нет. Что вы там сможете показать? Говнокод? Плохую архитектуру? Не продуманность чего либо? В портфолио кладут далеко не все работы. Кладут те, в которых есть что показать.
Однотипных проектов в интернете пруд пруди. Портфолио должно демонстрировать твои навыки, а не созданные тобой работы. Ты можешь сделать 100500 проектов, положить в портфолио, но если все они хреновые на субъективный взгляд оценивающего, то чё толку то?