Разница в написании значений для атрибутов в React и в Redux?

Question

[georgedubinsky8888]

Здраствуйте, изучаю Redux, но не понятны некоторые различия в написании Redux и React кода, поэтому хочу спросить у вас несколько моментов.

Есть главный компонент Redux приложения:

открывать не обязательно, это на случай если что-то непонятно в моих вопросах

export function searchFilter(search, data) {
  return data.filter(n => n["planeTypeID.code"].toLowerCase().includes(search));
}

const days = ["12-11-2019", "13-11-2019", "14-11-2019"];

class Root extends React.Component {
  componentDidMount() {
    this.props.onFetchData(days[this.props.propReducer.day]);
  }

  render() {
    const { onFilter, onSetSearch, onFetchData } = this.props;
    const { search, shift, data, filteredData } = this.props.propReducer;

    return (
      <div>
        <div className="content">
        
        <Header/>
        <br/>
        <div className="searchTitle">SEARCH FLIGHT</div>
             <br/>
        <TableSearch value={search} onChange={e => onSetSearch(e.target.value)} 
         onSearch={value => onFilter({ search: value })}/>
             <br/>
             <br/>
        <div className="buttonShift">
          {data && Object.keys(data).map(n => (
            <button data-shift={n} onClick={e => onFilter({ shift: e.target.dataset.shift })} className={n === shift ? "active" : "noActive"}>
                {n}
            </button>
          ))}
        </div>
          
        <div className="row">
        <span className="title">Yesterday: </span><span className="title">Today: </span><span className="title">Tomorrow: </span>
        </div>

        <div className="buttonDays">
          {days && days.map((day, i) => (
            <button  key={day} onClick={() => onFetchData(day)} className="buttonDaysOne">
                {day} 
            </button>
          ))}
        </div>

        {data && <TableData data={filteredData} />}
          </div>
        <Footer/>
      </div>
    );
  }
}

export const ConnectedRoot = connect(
  state => state,
  dispatch => ({
    onFilter: args => dispatch({ type: "RUN_FILTER", ...args }),
    onSetSearch: search => dispatch({ type: "SET_SEARCH", search }),
    onFetchData: day => dispatch(fetchData(day))
  })
)(Root);

Непонятна вот эта часть:

<TableSearch value={search} onChange={e => onSetSearch(e.target.value)} 
         onSearch={value => onFilter({ search: value })}/>

В Reacte значение атрибутов пишут вот так в основном:
onClick={this.methodChange}
В React мы создаем метод methodChange в котором есть setState который что-то изменяет в state.

Но в Redux я такого никогда не видел. Всегда передают значением атрибута анонимную функцию которая возвращает вызов функции с каким то параметром, (иногда даже обьект передают как параметр)....Почему так?
Почему в redux всегда пишут вот так:
onClick={() => onmethodChange(arg)}
Тоесть пишем анонимную функцию и возвращем другую функцию с аргументом а не пишем просто {this.onmethodChange} или хотя бы {this.props.onmethodChange}

И еще один вопрос, в моем коде есть такое:
onSearch={value => onFilter({ search: value })}/>

Почему мы здесь пишем аргументом обьект? Если пишем аргументом переменную она сможет принять значение по ходу исполнения программы, а здесь обьект также будет принимать значение? Обьясните пожалуйста этот момент.

Comments

[0xD34F]

Все эти вопросы - от незнания языка. Вам бы забыть про react, redux и т.п. и заняться изучением js.

Answer 1

[Егор Живагин]

Redux тут не при чём вообще

onClick={this.methodChange} -- Здесь мы не можем прокинуть кастомные аргументы в вызов метода

onClick={() => onmethodChange(arg)} -- здесь можем прокинуть любые аргументы

Почему мы здесь пишем аргументом обьект?

Исключительно потому что так удобнее) И юзаем деструктуризацию в самом методе onFilter, конечно. Работать это будет аналогично обычному пробрасыванию переменных, просто аргументы получаются ещё и именованными

redux -- это вообще не про компоненты, методы и их вызовы. Redux -- это actions, reducer и connect(mapStateToProps, mapDispatchToProps) в компоненте. А как вы эти экшены пишете и вызываете - это уже от вас исключительно зависит

Comments

[georgedubinsky8888]

спасибо большое!)
а вот если вот эту часть:
onSearch={value => onFilter({ search: value })}
написать без деструктуризации то как бы виглядела эта часть?

и что такое кастомные аргументы?

[Егор Живагин]

georgedubinsky8888, смотри, что я имел в виду под кастомными аргументами:
Когда ты пишешь так: <div onClick={this.methodChange} /> ты не можешь влиять на то, какие аргументы будут переданы при вызове в метод methodChange. То есть, если тебе туда надо передать не стандартный браузерный event, а что-то другое, например, свои переменные, тебе придётся писать вот так:

<div onClick={() => methodChange(arg1, arg2, ...)} />

Хотя, на самом деле, пишут немного по-другому, это более оптимизировано, нет вызовов анонимных функций:

methodChange = (arg1, arg2, ...) => () => {
  // your code
}

render() {
  // ...
  return (
    <div onChange={ this.methodChange(arg1, arg2, ...) } >
  )
}

Теперь про деструктуризацию. Ты можешь хоть так написать:

onSearch={onFilter} // это будет аналогично onSearch={value => onFilter(value)}

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