Question

有没有办法将某些状态（不是整个状态）传递给某个React组件的子组件？因此，redux中间件中的mapStateToProps和getState方法会使用这样的子状态吗？

这对于开发不知道它所使用的状态结构的react-redux逻辑非常重要。它可以在几个应用程序位置或不同的应用程序中使用。这种逻辑将作为一个独立的模块，并满足封装原则。

这样的概念存在于Knockout.js（“with”运算符）和桌面WPF.NET（将DataContext传递给子元素）中。

谢谢！

Answer 1

一种可能的方法是使用选择器和/或命名空间。

使用selector，您可以封装查询状态对象的逻辑。

但是，你不能完全隐藏redux状态的react-redux逻辑，因为它按照设计订阅了整个商店。不过，我们可以在这里使用namespace。

示例：

// counter.js
const namespace = 'counter'
const actualReducer = (state, action) => action.type === 'INC' ? state + 1 : state;
export default { [namespace]: actualReducer }
export const selector = (state, ownProps) => state[namespace]

// configureStore.js
import reducer from './counter'
const store = createStore(reducer)
export default store

// Component.js
import { selector } from './counter'
const Component = props => <some markup />
export default connect(selector)(Component)

那我们有什么？简而言之：

Component.js不知道状态形状甚至名称空间;
configureStore.js不知道计数器命名空间;
counter.js是唯一知道商店名称空间的地方。

还可以将选择器提取到单独的文件，因为它是我们处理原始状态对象的唯一地方。

请注意namespace应该是唯一的，或者，要从应用程序到应用程序可重复使用，它可以导入或注入。

IMO，重新使用react-redux内容（即connect(...)）的想法不是很扎实。通常，从app到app

我建议你明确这一点，因此底层组件应该是一个真正应该拥有尽可能不受影响的API的组件。

React-Redux缩小子组件的状态

1 个答案: