Nikolay Matyushkin

Добавлю к выше написанному комментарию от Вадима.

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

import React, { useState } from "react";
import "./styles.css";

const View = ({ inputValues, onChangeInput }) => {
  return <input type="text" value={inputValues} onChange={onChangeInput} />;
};

const Logic = () => {
  const [inputValues, setInputValues] = useState("");

  const onChangeInput = e => {
    setInputValues(e.target.value);

    // *** Здесь мы хотим взять новые данные и что-то с ними сделать (в данный
    // момент мы просто выводим в консоль)
    console.log(inputValues);
  };

  return <View inputValues={inputValues} onChangeInput={onChangeInput} />;
};

export default Logic;

*** Здесь данные устаревшие, это описал Вадим, и я с ним согласен. Но всё-таки, есть вариант использовать данные сразу после их изменения, и к сожалению в хуках этот вариант выглядит куда менее эстетичнее, нежели в классах.

Дело в том, что в классах для изменения состояния используется setState (кэп). setState первым параметром принимает изменяемый объект, а вторым (необязательным) параметром он принимает callback, в котором можно получить уже изменившийся state. Ниже приведён пример автора, где функциональная компонента Logic переделана в одноименную классовую компоненту. Тут. При вводе символов в input, в консоли мы будем получать символы по порядку, т.е. будем видеть актуальный state

Чтобы добиться такого же результата у автора, нужно подписаться на изменение параметра inputValues в хуке useEffect. Тут. Теперь мы так же при вводе символов в input видим актуальные данные.

Ваша логика здесь такая:

Производя ввод каких-то символов, вызывается функция filterUsers, которая в свою очередь диспатчит вводимое значение в store, заменяя каждый раз параметр search. Каждый раз, когда вызывается dispatch происходит перерендер того состояния, который меняется в зависимости от диспатча. В вашем примере, вы обновляете состояние параметра search, когда параметр users сохраняет своё состояние с того момента, когда вы последний раз диспатчили его (т.е. вызывали функцию loadUsers), потому, что функция filterUsers ссылается на кейс USERTABLE_FILTER_USERS, а к кейсу, который меняет непосредственно состояние параметра users (USERSTABLE_LOAD_USERS) он не обращается.

Попробуйте так. Решение конечно не идеально, но Вы должны увидить разницу. Замените свой кейс USERTABLE_FILTER_USERS, на тот, что внизу.

case USERTABLE_FILTER_USERS:
                return {
                    ...state,
                    search: action.payload,
                    users: filteredUsers(state.users)
                }

import React, {Fragment} from "react"
import { connect } from "react-redux"
import UsersTable from "./UsersTable";
import { loadUsers } from "../../store/UsersTable/actions";


class UsersTableContainer extends React.Component {

    async componentDidMount() {
        const response = await fetch("http://www.filltext.com/?rows=500&id={index}&name={firstName}&surname={lastName}&city={city}&fullname={firstName}~{lastName}&lastloginfromip={ip}")
        const data = await response.json()
        this.props.loadUsers(data)
    }

    render() {
        const { users, loadUsers } = this.props
        return (
             <Fragment>
                   {!isLoading ? (
                        <React.Fragment>
                            <UsersTable
                                users={users}
                                loadUsers={loadUsers}
                            />
                        </React.Fragment>
                   ) : (
                      <Preloader>
                   )}
             </Fragment>
        )
    }
}

const setStateToProps = state => {
    return {
        users: state.userstable.users,
        isLoading: state.userstable.isLoading
    }
}

const setDispatchToProps = {
    loadUsers
}

export default connect(setStateToProps, setDispatchToProps)(UsersTableContainer)

Попробуйте так. Вместо компоненты < Preloader > подсуньте свою "крутилку".

<div className={b({ block, elem: "time-bank"})}>
              <div className={b({ block, elem: "time"})}>
                {secondsToClock(timer)}
              </div>
              <div className={b({ block, elem: "bank"})}>
              <i className="fa fa-database" />
              < CountUp end= { 100 }>
                     {({ countRef }) => (
                          <span ref={countRef}></span>
                      )}
              </CountUp> 
              &nbsp; {fund}
              </div>

            </div>

Если ещё актуально, попробуй так.

Если меню сделано посредством JS, сделай условие, при котором если выдвигается меню, то у контента задаётся margin-left