react-native - 订阅 Redux 中 store 中的单个属性更改

Question

在 Redux 中，我可以轻松订阅存储更改

store.subscribe(() => my handler goes here)

但是，如果我的商店充满了不同的对象，并且在应用程序的特定位置我想订阅仅在商店中的特定对象中所做的更改，该怎么办？

Answer 1

使用subscribe时无法订阅部分商店直接，但正如 Redux 的创建者自己所说 - don't use subscribe directly!为了使 Redux 应用程序的数据流真正发挥作用，您将需要一个组件来包装整个应用程序。该组件将订阅您的商店。其余组件将是此包装器组件的子组件，并且只会获取它们需要的状态部分。

如果您将 Redux 与 React 结合使用，那么有个好消息 - 官方 react-redux包会为您解决这个问题!它提供了包装组件，称为 <Provider /> 。然后，您将拥有至少一个“智能组件”，用于监听 Provider 传递的状态更改。从商店。您可以指定它应该监听状态的哪些部分，并且状态的这些部分将作为 props 传递给该组件(当然，它可以将这些部分传递给它自己的子组件)。您可以使用 connect() 来指定在您的“智能”组件上运行并使用 mapStateToProps函数作为第一个参数。回顾一下:

用 Provider 包裹根组件订阅存储更改的组件

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

现在 <App /> 的任何子级包裹着 connect()将是一个“智能”组件。您可以传入mapStateToProps选择状态的某些部分并将其作为 Prop 。

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

class ChildOfApp extends Component {
    render() {
        return <div>{this.props.somethingFromStore}</div>
    }
}

//wrap App in connect and pass in mapStateToProps
export default connect(mapStateToProps)(ChildOfApp)

显然<App />可以有很多 child ，您可以选择该州的哪些地区 mapStateToProps应该听它的每个 child 。我建议阅读 usage with React 上的文档更好地理解这个流程。