在 Redux 中订阅存储中的单个属性更改 [英] Subscribe to single property change in store in Redux

问题描述

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

store.subscribe(() => 我的处理程序在这里)

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

解决方案

直接使用subscribe是没有办法订阅部分store的，但是正如Redux的创建者自己说的——不要直接使用subscribe！为了让 Redux 应用程序的数据流真正起作用，您需要一个组件来包装整个应用程序.此组件将订阅您的商店.您的其余组件将成为此包装器组件的子组件，并且只会获取它们需要的状态部分.

如果您在 React 中使用 Redux，那么有个好消息 - 官方 react-redux包会为您解决这个问题！它提供了称为 的包装器组件.然后，您将至少拥有一个智能组件"，用于侦听 Provider 从商店传递的状态更改.您可以指定它应该侦听状态的哪些部分，并且这些状态部分将作为道具传递给该组件(当然，它可以将这些传递给它自己的子组件).您可以使用 智能"组件上的 connect() 函数，并使用 mapStateToProps 函数作为第一个参数.回顾一下:

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

ReactDOM.render(<提供者商店={商店}><应用程序/></提供者>,document.getElementById('root'))

现在 的任何被 connect() 包裹的子组件都将是一个智能"组件.你可以传入 mapStateToProps 来选择状态的某些部分并将其作为道具.

const mapStateToProps = (state) =>{返回 {somethingFromStore: state.somethingFromStore}}class ChildOfApp 扩展组件 {使成为() {return 
{this.props.somethingFromStore}
}}//将App包裹在connect中并传入mapStateToProps导出默认连接(mapStateToProps)(ChildOfApp)

显然 可以有许多子级，您可以选择 mapStateToProps 应该为每个子级监听状态的哪些部分.我建议阅读有关 使用 React 的文档以更好地了解这个流程.

In Redux I can easily subscribe to store changes with

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

But what if my store is full of different objects and in a particular place in my app I want to subscribe to changes made only in a specific object in the store?

解决方案

There is no way to subscribe to part of the store when using subscribe directly, but as the creator of Redux says himself - don't use subscribe directly! For the data flow of a Redux app to really work, you will want one component that wraps your entire app. This component will subscribe to your store. The rest of your components will be children to this wrapper component and will only get the parts of the state that they need.

If you are using Redux with React then there is good news - the official react-redux package takes care of this for you! It provides that wrapper component, called a <Provider />. You will then have at least one "smart component" that listens to state changes passed down by the Provider from the store. You can specify which parts of the state it should listen to, and those pieces of the state will be passed down as props to that component (and then of course, it can pass those down to its own children). You can specify that by using the connect() function on your "smart" component and using the mapStateToPropsfunction as a first parameter. To recap:

Wrap root component with Provider component that subscribes to store changes

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

Now any child of <App /> that is wrapped with connect() will be a "smart" component. You can pass in mapStateToProps to pick certain parts of the state and give it those as props.

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)

Obviously <App /> can have many children and you can pick and choose which parts of the state the mapStateToProps should listen to for each of its children. I'd suggest reading the docs on usage with React to get a better understanding of this flow.

这篇关于在 Redux 中订阅存储中的单个属性更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！