G
G
georgedubinsky88882019-11-20 13:23:21
React
georgedubinsky8888, 2019-11-20 13:23:21

Difference in writing values ​​for attributes in React and in Redux?

Hello, I'm learning Redux, but I don't understand some of the differences in writing Redux and React code, so I want to ask you a few points.
There is a main Redux application component:

it is not necessary to open it, this is in case something is not clear in my questions
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);

This part is not clear:
<TableSearch value={search} onChange={e => onSetSearch(e.target.value)} 
         onSearch={value => onFilter({ search: value })}/>

In Reacte, the attribute value is written like this basically:
onClick={this.methodChange}
In React, we create a methodChange method in which there is a setState that changes something in the state.
But I've never seen this in Redux. An anonymous function is always passed as an attribute value, which returns a function call with some parameter, (sometimes even an object is passed as a parameter) .... Why is that?
Why is it always written like this in redux: That is,
onClick={() => onmethodChange(arg)}
we write an anonymous function and return another function with an argument, and do not just write {this.onmethodChange} or at least {this.props.onmethodChange}
And one more question, in my code there is this:
onSearch={value => onFilter({ search: value })}/>
Why are we writing object as an argument here? If we write a variable as an argument, will it be able to take on a value during the execution of the program, but here the object will also take on a value? Please explain this point.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Egor Zhivagin, 2019-11-20
@georgedubinsky8888

Redux has nothing to do with it at all -- Here we cannot throw custom arguments into the method call -- here we can throw any arguments Only because it's more convenient) And we use destructuring in the onFilter method itself, of course. This will work similarly to the usual forwarding of variables, just the arguments are also named redux - this is not about components, methods and their calls at all. Redux is actions, reducer and connect(mapStateToProps, mapDispatchToProps) in a component. And how you write and call these actions is entirely up to you.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question