Do you need to refactor your code?

Question

JavaScript

Friends, I'm doing my first react project here, and I didn't have enough experience to do everything right right away. Halfway through, I had to introduce redux and completely redo all the links, and now I still seem to have made a big mistake. There are no actions in my application as separate components. It looks like this (small code for understanding):

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
    }

}

And this is what the component looks like:

component

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)

I would not bother, it works and works. But, understand correctly, this is my first application and I want to get a job in this direction for a junior. I need a project in my portfolio, so please share your opinion, friends. I'm not a smart person, please take this into account when answering :)

Answer 1

Most programmers, including those who will interview you, are like monkeys, they were told that this is the right way and that, they do not hesitate to pass it on and hit everyone who dares to do it out of the pattern on the head. All this fuss with actions and types is definitely redundant in redux in 95% of cases. In general, I made an add-in so that procedures that change the state were directly called. Though I wouldn't risk posting this as a portfolio, for the reasons mentioned above.
There is nothing wrong with your code itself, you can leave it, explaining in the comments that moving the actions to a separate file in this case leads to an excessive boilerplate. The only thing is still clearer if mapStateToProps and MapDispatchToPropstaken to the top, and not inserted into the connection directly.