我正在使用Redux创建一个应用程序,并且为了解决为什么最好将动作和缩减器放在单独的文件中.至少,这是我从所有例子中得到的印象.
每个操作或操作创建器似乎映射到由reducer调用的单个函数(在switch语句内).将它们放在同一个文件中是不合逻辑的?它还使操作类型和切换案例使用相同的常量更容易,因为它不必在文件之间导出/导入.
在这个Redux:Colocating Selectors with Reducers Egghead教程中,Dan Abramov建议使用接受完整状态树而不是状态切片的选择器来封装状态知识,远离组件.他认为这使得更容易改变状态结构,因为组件不知道它,我完全赞同.
然而,他建议的方法是,对于对应于特定状态切片的每个选择器,我们再次将其与根减速器一起定义,以便它可以接受完整状态.当然,这种实现开销会破坏他想要实现的目标......简化将来改变状态结构的过程.
在一个包含许多reducers的大型应用程序中,每个都有很多选择器,如果我们在root reducer文件中定义所有选择器,我们不会不可避免地遇到命名冲突吗?直接从相关的reducer导入选择器并传入全局状态而不是相应的状态片段有什么问题?例如
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [...state, todo(undefined, action)];
case 'TOGGLE_TODO':
return state.map(t => todo(t, action));
default:
return state;
}
};
export default todos;
export const getVisibleTodos = (globalState, filter) => {
switch (filter) {
case 'all':
return globalState.todos;
case 'completed':
return globalState.todos.filter(t => t.completed);
case 'active':
return globalState.todos.filter(t => !t.completed);
default:
throw new Error(`Unknown filter: ${filter}.`); …Run Code Online (Sandbox Code Playgroud) Dan Abramov的这篇教程表明,使用作用于全局状态(而不是状态片段)的选择器的优点是它们允许容器与状态结构的知识分离.
如果是这种情况,我们是否应该避免直接将状态值映射到props,而是使用选择器?否则,我们的容器仍然必须知道状态树中存在这些值的位置.
为了说明一个例子......
直接将嵌套状态值映射到prop:
const mapStateToProps = (state) => ({
isModalVisible: state.modal.isVisible,
});
Run Code Online (Sandbox Code Playgroud)
VS
不了解国家结构.使用isModalVisible()selector 获取值:
const mapStateToProps = (state) => ({
isModalVisible: isModalVisible(state),
});
Run Code Online (Sandbox Code Playgroud)
但是,后一种方法的问题是对于状态树中的每个值,我们必须编写一个选择器.这似乎是很多样板代码只是为了选择一个简单的值.这被认为是最佳做法吗?
我正在使用 React Native 的Image.getSize(uri, (width, height) => {})方法来获取远程图像的尺寸并将其设置为组件的状态setState():
componentDidMount() {
Image.getSize(this.props.uri, (width, height) => {
this.setState({ width, height })
})
}
Run Code Online (Sandbox Code Playgroud)
但是,有时组件在getSize()请求返回之前卸载,这会导致setState()调用时出现以下错误:
无法对卸载的组件执行 React 状态更新。这是一个空操作,但它表明您的应用程序中存在内存泄漏。要修复,请取消 componentWillUnmount 方法中的所有订阅和异步任务。
我知道可以跟踪组件的安装状态以防止setState()调用,但显然这被认为是一种反模式。
鉴于getSize()没有提供取消挂起请求的方法,是否还有其他方法可以实现这一点?
javascript ×4
redux ×3
reactjs ×2
azure-devops ×1
ecmascript-6 ×1
react-native ×1
react-redux ×1
reducers ×1
yaml ×1