Reactjs 在saga中，我应该在哪里更新过滤后的数据，重新选择还是还原？

我目前正在使用

reselect

，

redux sagas

和reducer。我有一个处于状态的filterParameter，它保存filteredParameter值

filterReducer.js

：

initialState = {
  filteredParameters: { ... } // null by default
}

// On change function
  const statusChange = event => {
    event.preventDefault();
    const { name, value } = event.target;

    setFilterParameters({ ...filterParameters, [name]: parseInt(value) });
  };

// Render
 {statuses && (
        <select name="statusId" onChange={statusChange}>
          <option>All</option>
          {statuses.map(status => (
            <option
              selected={
                filteredParameters && filteredParameters.statusId === status.id
              }
              key={status.id}
              name={status.name}
              value={status.id}
            >
              {status.icon} {status.name}
            </option>
          ))}
        </select>
      )}

// MapDispatchToProps
const mapDispatchToProps = dispatch => ({
  filterIdeas: parameters => dispatch(filterIdeas(parameters)),
  fetchCategories: () => dispatch(fetchCategoriesStart())
});

function* filterCurrentIdeas({ payload: filteredParameters }) {
  try {
    yield put(setFilterParameters(filteredParameters));
    const ideas = yield select(selectBoardIdeasItems);

    // Custom function that does the filtering handling, this is shown below 

    const filterResults = yield call(
      filterIdeasByStatus,
      ideas,
      filteredParameters
    ); 
    yield put(filterIdeasSuccess(filterResults)); // This then gets fed into the reducer
  } catch (err) {
    console.log(err);
    return;
  }
}

export const filterIdeasByStatus = (ideas, filter) => {
  const { statusId, categoryId, orderBy, query } = filter;
  const orderedIdeas = orderBy ? _.orderBy(ideas, ["voteCount"]) : ideas;
  const regex = new RegExp(`${query}`, "gmius");

  const filtered = orderedIdeas.filter(
    idea =>
      (!statusId || (statusId && idea.IdeaStatus.id === statusId)) &&
      (!categoryId ||
        (categoryId && _.includes(idea.categoryIds, categoryId))) &&
      (!query || (query && idea.title.match(regex)))
  );

  return convertIdeasToObject(filtered);
};

过滤后的数据用于my component

filters.js

：

initialState = {
  filteredParameters: { ... } // null by default
}

// On change function
  const statusChange = event => {
    event.preventDefault();
    const { name, value } = event.target;

    setFilterParameters({ ...filterParameters, [name]: parseInt(value) });
  };

// Render
 {statuses && (
        <select name="statusId" onChange={statusChange}>
          <option>All</option>
          {statuses.map(status => (
            <option
              selected={
                filteredParameters && filteredParameters.statusId === status.id
              }
              key={status.id}
              name={status.name}
              value={status.id}
            >
              {status.icon} {status.name}
            </option>
          ))}
        </select>
      )}

// MapDispatchToProps
const mapDispatchToProps = dispatch => ({
  filterIdeas: parameters => dispatch(filterIdeas(parameters)),
  fetchCategories: () => dispatch(fetchCategoriesStart())
});

function* filterCurrentIdeas({ payload: filteredParameters }) {
  try {
    yield put(setFilterParameters(filteredParameters));
    const ideas = yield select(selectBoardIdeasItems);

    // Custom function that does the filtering handling, this is shown below 

    const filterResults = yield call(
      filterIdeasByStatus,
      ideas,
      filteredParameters
    ); 
    yield put(filterIdeasSuccess(filterResults)); // This then gets fed into the reducer
  } catch (err) {
    console.log(err);
    return;
  }
}

export const filterIdeasByStatus = (ideas, filter) => {
  const { statusId, categoryId, orderBy, query } = filter;
  const orderedIdeas = orderBy ? _.orderBy(ideas, ["voteCount"]) : ideas;
  const regex = new RegExp(`${query}`, "gmius");

  const filtered = orderedIdeas.filter(
    idea =>
      (!statusId || (statusId && idea.IdeaStatus.id === statusId)) &&
      (!categoryId ||
        (categoryId && _.includes(idea.categoryIds, categoryId))) &&
      (!query || (query && idea.title.match(regex)))
  );

  return convertIdeasToObject(filtered);
};

这是我的reducer

filter.reducer.js

    case BoardActionTypes.FILTER_IDEAS_SUCCESS:
      return {
        ...state,
        filteredItems: action.payload
      };

下面是用于筛选

filter.utils.js

的自定义实用工具帮助程序：

initialState = {
  filteredParameters: { ... } // null by default
}

// On change function
  const statusChange = event => {
    event.preventDefault();
    const { name, value } = event.target;

    setFilterParameters({ ...filterParameters, [name]: parseInt(value) });
  };

// Render
 {statuses && (
        <select name="statusId" onChange={statusChange}>
          <option>All</option>
          {statuses.map(status => (
            <option
              selected={
                filteredParameters && filteredParameters.statusId === status.id
              }
              key={status.id}
              name={status.name}
              value={status.id}
            >
              {status.icon} {status.name}
            </option>
          ))}
        </select>
      )}

// MapDispatchToProps
const mapDispatchToProps = dispatch => ({
  filterIdeas: parameters => dispatch(filterIdeas(parameters)),
  fetchCategories: () => dispatch(fetchCategoriesStart())
});

function* filterCurrentIdeas({ payload: filteredParameters }) {
  try {
    yield put(setFilterParameters(filteredParameters));
    const ideas = yield select(selectBoardIdeasItems);

    // Custom function that does the filtering handling, this is shown below 

    const filterResults = yield call(
      filterIdeasByStatus,
      ideas,
      filteredParameters
    ); 
    yield put(filterIdeasSuccess(filterResults)); // This then gets fed into the reducer
  } catch (err) {
    console.log(err);
    return;
  }
}

export const filterIdeasByStatus = (ideas, filter) => {
  const { statusId, categoryId, orderBy, query } = filter;
  const orderedIdeas = orderBy ? _.orderBy(ideas, ["voteCount"]) : ideas;
  const regex = new RegExp(`${query}`, "gmius");

  const filtered = orderedIdeas.filter(
    idea =>
      (!statusId || (statusId && idea.IdeaStatus.id === statusId)) &&
      (!categoryId ||
        (categoryId && _.includes(idea.categoryIds, categoryId))) &&
      (!query || (query && idea.title.match(regex)))
  );

  return convertIdeasToObject(filtered);
};

目前这一切都是可行的，但我做得不对，还是有更好的方法或指南可以给我一个更好的例子

---

提前谢谢

帮助函数

filteridesbystatus

是保持代码模块化和组织化的最佳实践

但是，给定的

setFilterParameters

是一个动作：

setFilterParameters（{…filterParameters，[name]：parseInt（value）}）

你为什么叫它两次

在
filtercurrentiadeas
saga中的
filter.sagas.js
在
filters.js
组件
通常，您希望在
statusChange
上发送一个操作，并让saga过滤项目（就像您所做的那样）。但是两次调用相同的操作可能会导致副作用

小贴士：记住React组件名称空间通常是大写的，即filters.js应该是filters.js

您还可以在中寻求最佳实践和/或寻求反馈

希望您获得一些见解：）