Это лучший способ фильтровать данные внутри для визуализации?

Question

Я новичок в Redux. Я пытаюсь отфильтровать свой код и перейти на страницу компонента другого маршрутизатора. Это лучший способ отфильтровать мои данные в методе рендеринга или я должен сделать это где-нибудь еще? И как я могу передать свои реквизиты на другую страницу маршрутизатора?

Я делаю следующее;

Это первая страница компонента.

class Home extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.actions.getProgramsStart();
  }
  render() {
  const { ProgramsLoading, programs } = this.props.state;
  if(programs) {
      const SeriesFilterData=[];
      const MoviesFilterData =[];
    programs.map(FilterPrograms => {
      if(FilterPrograms.programType==="series" && FilterPrograms.releaseYear >= 2010){
        SeriesFilterData.push(FilterPrograms);
      }
      if(FilterPrograms.programType==="movie" && FilterPrograms.releaseYear >= 2010){
        MoviesFilterData.push(FilterPrograms);
      }
    });
  }
    return (
      <div id="home">
          { ProgramsLoading ? <div><Loader style={{ display: "block" }} content="Program List loading" /></div> : <h1>program data</h1> }
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    state: {
      ...state.home
    }
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(homeActions, dispatch)
  };
};

Answer 1

Да, вы можете избежать ввода фильтров, возвращая что-то ранее на основе вашего ProgramsLoading, а затем изменив свой map, который возвращает пустой массив и создавая 2 дополнительных массива в каждом рендере для reduce, который будет использовать объект только с 2 массивами, которые вам нужны, все в 1 цикле.

Также учтите, что вы вызываете FilterPrograms для переменной вашей карты, и это сбивает с толку, потому что это текущая программа и FilterPrograms звучит скорее как функция.

class Home extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.actions.getProgramsStart();
  }
  render() {
  const { ProgramsLoading, programs } = this.props.state;
  //check if you are loading, so you dont need to apply filters or whatever you add (filter/map creates a new array each time)
  if(ProgramsLoading) return <div><Loader style={{ display: "block" }} content="Program List loading" /></div>

  const defaultValue = {SeriesFilterData: [], MoviesFilterData =[]}
  const reducerFunction = (accum, currentValue)=>{
      //if this check is an AND for all the cases, return directly if the item doesnt match.
      if(currentValue.releaseYear < 2010) return accum;
      if(currentValue.programType==="series"){
         accum.SeriesFilterData.push(currentValue);
      } else if(currentValue.programType==="movie"){
         accum.MoviesFilterData.push(currentValue);
      }
      return accum;
  }
  const results = programs.reduce( reducerFunction, defaultValue);
    // using {...result} will destructure to be (SeriesFilterData, MoviesFilterData) separeted props
    return (
      <div id="home">
          <h1>program data</h1>
          <SomeComponent {...resulst} /> 
      </div>
    );
  }
}