reactjs - 我应该在哪里更新过滤的数据,在 saga、reselect 或 reducer 中?
问题描述
我目前正在使用reselect
,redux-sagas
和减速器。我有一个 filterParameter 状态,其中包含 filtersParameter 值filterReducer.js
:
initialState = {
filteredParameters: { ... } // null by default
}
过滤后的数据用于我的组件filters.js
:
// 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())
});
然后我有一个saga
设置来捕捉这个动作filter.sagas.js
:
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;
}
}
这是我的减速机filter.reducer.js
case BoardActionTypes.FILTER_IDEAS_SUCCESS:
return {
...state,
filteredItems: action.payload
};
这是用于过滤的自定义实用程序助手filter.utils.js
:
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);
};
目前这一切都有效,但是我做错了还是有更好的方法或指南可以给我一个更好的例子?
提前致谢!
解决方案
辅助函数filterIdeasByStatus
是保持代码模块化和有条理的好方法。
但是,给定setFilterParameters
的是一个动作:
setFilterParameters({ ...filterParameters, [name]: parseInt(value) });
你为什么要叫它两次?
- 在佐贺
filter.sagas.js
_filterCurrentIdeas
- 在
filters.js
组件
通常你会想要发送一个动作statusChange
并让 saga 过滤项目(就像你做的那样)。但是两次调用相同的操作可能会导致副作用。
细致提示:注意 React 组件的命名空间通常都是大写的,即 filters.js 应该是 Filters.js。
您还可以在Stack Exchange 代码审查中寻求最佳实践和/或寻求反馈
希望您获得一些见解:)
推荐阅读
- sql - 如何插入记录并返回主键以更新另一个表中的外键?
- android - Firestore 中的复杂数据库建模
- javascript - 如何控制加载了加载查询功能的元素
- python - Python无法从线程更新
- excel - 有人可以解决 Selection.Replace 问题吗?
- c# - 如何在 C# 中读取或识别 ModelState(有效/无效)错误?
- python - ModuleNotFoundError:创建 TensorFlow 文档时没有名为“tensorflow_docs”的模块
- r - 通过在 x 轴上打印 var A、f(A) 的函数,针对 var B(y 轴)绘制 var A(x 轴)
- c# - 如何在 WPF 中显示不同对象(子对象)的列表并将列表内的按钮绑定到每一行?
- amazon-rds - Amazon rds Aurora 克隆/恢复时间点 API