Изменение state

import { useDispatch } from 'react-redux';
import '../Styles/Navigation.css';
import {NavLink} from 'react-router-dom';
import { getOrders, getSortedOrders } from '../Redux/Reducers/ordersSlice';
 
const Navigation = () => {
    const dispatch = useDispatch();
    const getAllOrders = () => {
        dispatch(getOrders());
    };
    const getUncoordinatedOrders = () => {
        dispatch(getSortedOrders('несогласован'));
    };
    const getOrdersInProgress = () => {
        dispatch(getSortedOrders('в работе'));
    };
    const getCompletedOrders = () => {
        dispatch(getSortedOrders('завершен'));
    };
 
    return (
        <aside className = "menu">
            <p className = 'menu-label'>Личные задачи</p>
            <ul className = 'menu-list'>
                <li><NavLink to = "/Tasks">Список поручений</NavLink></li>
            </ul>
            <p className = "menu-label">Заказы</p>
            <ul className = "menu-list">
                <li>
                    <NavLink to = "/Orders" onClick = {getAllOrders}>Все заказы</NavLink>
                    <ul>
                        <li><NavLink to = "/Orders" onClick = {getUncoordinatedOrders}>На согласовании</NavLink></li>
                        <li><NavLink to = "/Orders" onClick = {getOrdersInProgress}>В работе</NavLink></li>
                        <li><NavLink to = "/Orders" onClick = {getCompletedOrders}>Завершенные</NavLink></li>
                    </ul>
                </li>
            </ul>
        </aside>
    );
}
 
export default Navigation;

import React from 'react';
import { connect, useDispatch, useSelector } from 'react-redux';
import { createOrder, getOrders } from '../../../Redux/Reducers/ordersSlice';
import '../../../Styles/Content.css';
import OrdersEditButtons from './OrdersEditButtons';
import { useEffect } from 'react';
 
const Orders = () => {
    const dispatch = useDispatch();
    const state = useSelector(state => state.orders.orders);
    useEffect(() => {dispatch(getOrders())}, [dispatch, state]);
    let orderNumber = React.createRef();
    let orderType = React.createRef();
    let orderPrice = React.createRef();
    let orderClient = React.createRef();
    let orderDate = React.createRef();
    let orderComplectation = React.createRef();
    let orderStatus = React.createRef();
    const user = JSON.parse(window.localStorage.getItem('user'));
    let disabled;
    if(user.userRole === 'director' || user.userRole === 'designer' || user.userRole === 'developer'){
        disabled = false;
    } else {
        disabled = true;
    }
    const addNewOrder = () => {
        if(orderNumber.current.value.length < 4 || orderNumber.current.value.length > 4 || orderNumber.current.value < 0) {
            alert('Укажите валидный номер заказа, состоящий из четырех цифр');
        }else if(orderPrice.current.value === '' || orderPrice.current.value < 0) {
            alert('Укажите валидную стоимость заказа');
        } else if(orderClient.current.value === '' || orderDate.current.value === '') {
            alert('Заполните все поля!');
        } else {
            const newOrder = {
                id : state.length + 1,
                number : orderNumber.current.value,
                type : orderType.current.value,
                price : orderPrice.current.value,
                client : orderClient.current.value,
                date : orderDate.current.value,
                complectation : orderComplectation.current.value,
                files : [],
                status : orderStatus.current.value
            }
            dispatch(createOrder(newOrder));
            orderNumber.current.value  = '';
            orderPrice.current.value = '';
            orderClient.current.value = '';
            orderDate.current.value = '';
        }    
    }
    let result = state.map((item, index) => {
        return (
            <tr key = {index}>
                <td>{item.number}</td>
                <td>{item.type}</td>
                <td>{item.price}</td>
                <td>{item.client}</td>
                <td>{new Date(item.date).toLocaleDateString()}</td>
                <td>{item.complectation}</td>
                <td>{item.status}</td>
                <td><OrdersEditButtons id = {item.id} orderNumber = {item.number}/></td>
            </tr>
        );
    });
    return (
        <div className = 'content'>
            <h1 className = 'subtitle has-text-centered'>Заказы</h1>
            <table className = 'table is-hoverable is-fullwidth'>
                <thead>
                    <tr>
                        <th>Номер заказа</th>
                        <th>Тип изделия</th>
                        <th>Стоимость</th>
                        <th>Клиент</th>
                        <th>Дата</th>
                        <th>Комплектация</th>
                        <th>Статус</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {result}
                </tbody>
            </table>
        </div>
    );
}
 
 
export default connect()(Orders);

useEffect(_ => dispatch(getOrders()), [dispatch, state]);

import React, { useEffect } from 'react';

import { useEffect, useState, useRef } from 'react';