P
P
petrro2019-11-19 12:20:01
React
petrro, 2019-11-19 12:20:01

Some questions about Redux-React code?

Hello! I'm learning Redux. There is a Redux application that sends a request to the API - receives data and displays it on the page, and then the data can be filtered by a search filter and buttons. But in the main component, I can't understand a small part of the code:

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);

What does this code generally do? And what does each line of this code do? Where did onFilter, onSetSearch, onFetchData come from? Have we just created them here? In the connect method?
And here is the main component in full:
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</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);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Abr_ya, 2019-11-19
@petrro

I'm just getting started with Redux.
As far as I understood:
1) connect connects the component with Redux,
2) in this case, functions and properties (state) are transferred, in fact,
3) { type: "RUN_FILTER", ...args } is an action, and the best practice is put them in a separate file,
4) the action will work in the reducer.
What is the app, by the way?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question