Reactjs 使用Redux Connect订阅单个减速机时，仍然会将所有减速机交付给组件

我有一家店里有9个减速机。我只想让我的组件听其中一个discoverSearch。使用MapStateTops的速记版本，这是我的代码。但是，该组件仍在交付中。组件中的所有减速器都将接收道具

组成部分

发现者

还原剂

应用程序条目

Redux的连接部分对我来说有点新，所以我可能遗漏了一些明显的东西

编辑： 添加了App.js入口点 添加了完整的DiscoverSearchResultsContainer组件减去样式

您的DiscoverSearchReducer是否可能为每次分派返回一个新对象，即使是在无操作的情况下

function reduceSomething(state, action) {
     if action.type == "forMe":    
       return {action.payload}
     else
       return {...state}
}

而不是：

 return state

因为前者将为每次分派提供一个新对象，包含预期的内容，但connect将无法禁止向组件传递道具

这是一个奇怪的问题，但它与您的症状相符。

您的DiscoverSearchReducer是否可能在每次调度时都返回一个新对象，即使是在无操作的情况下

function reduceSomething(state, action) {
     if action.type == "forMe":    
       return {action.payload}
     else
       return {...state}
}

而不是：

 return state

因为前者将为每次分派提供一个新对象，包含预期的内容，但connect将无法禁止向组件传递道具

---

这是一个奇怪的错误，但它与您的症状相符。

错误出现在您的连接功能中：

export default connect(store => (
  { discoverSearch: store.discoverSearch },
    dispatch => dispatch
  ))(DiscoverSearchResultsContainer)

括号错误，这相当于：

connect(store => {
  // this does nothing
  { discoverSearch: store.discoverSearch };
  return dispatch => dispatch;
})(...)

这实际上和

connect(state => state)(...)

export default connect(store => {
          return { discoverSearch: store.discoverSearch }
      }
)(DiscoverSearchResultsContainer)

你可能想写的是：

connect(store = ({ discoverSearch: store.discoverSearch }), 
  dispatch => dispatch)(...)

编辑：删除不必要的分派

如前所述，映射分派是无用的，您可以这样做

const mapStateToProps = state => ({ discoverSearch: state.discoverSearch });
connect(mapStateProps)(Component);

---

错误出现在连接函数中：

export default connect(store => (
  { discoverSearch: store.discoverSearch },
    dispatch => dispatch
  ))(DiscoverSearchResultsContainer)

括号错误，这相当于：

connect(store => {
  // this does nothing
  { discoverSearch: store.discoverSearch };
  return dispatch => dispatch;
})(...)

这实际上和

connect(state => state)(...)

export default connect(store => {
          return { discoverSearch: store.discoverSearch }
      }
)(DiscoverSearchResultsContainer)

你可能想写的是：

connect(store = ({ discoverSearch: store.discoverSearch }), 
  dispatch => dispatch)(...)

编辑：删除不必要的分派

如前所述，映射分派是无用的，您可以这样做

const mapStateToProps = state => ({ discoverSearch: state.discoverSearch });
connect(mapStateProps)(Component);

---

使用connect最简单的方法是将mapStateToProps和mapDispatchToProps分离到它们自己的函数中，以避免出现语法错误。如果要将dispatch作为第二个参数返回，则最好不要使用它，因为如果要连接的第二个参数为空，默认情况下会返回dispatch

根据

[MapDispatchTopPropsDispatch[ownProps]：dispatchProps]对象或 函数：如果传递了一个对象，则假定其中的每个函数 成为Redux action的创建者。具有相同函数名的对象， 但是每一个动作的创建者都会被打包成一个分派呼叫，这样他们就可以 直接调用，将合并到组件的道具中

如果传递了一个函数，它将作为第一个被分派 参数由您来返回以某种方式使用的对象 派遣以您自己的方式绑定动作创建者。提示：您可以使用 Redux中的bindActionCreators帮助程序

如果您的mapDispatchToProps函数声明为使用两个 参数，它将以dispatch作为第一个参数调用，并且 作为第二个参数传递给连接组件的支柱， 并将在连接的组件收到新消息时重新调用 道具。第二个参数通常被称为ownProps 惯例

如果不提供自己的mapDispatchToProps函数或对象 默认的mapDispatchToProps中充满了动作创建者 实现只是将分派注入组件的道具中

你可以像这样使用你的连接站

const mapStateToProps = store => {
    return { discoverSearch: store.discoverSearch }
}

export default connect(mapStateToProps)(DiscoverSearchResultsContainer)

当您使用类似的连接时

export default connect(store => (
      { discoverSearch: store.discoverSearch },
        dispatch => dispatch
))(DiscoverSearchResultsContainer)

实际上，由于您希望返回{discoverSearch:store.discoverSearch}，而不是{discoverSearch:store.discoverSearch}，dispatch=>dispatch，所以您的位置不正确。应该是

export default connect(store => (
      { discoverSearch: store.discoverSearch })
)(DiscoverSearchResultsContainer)

上面的代码片段与

connect(state => state)(...)

export default connect(store => {
          return { discoverSearch: store.discoverSearch }
      }
)(DiscoverSearchResultsContainer)

---

这就是你需要的。但是，您必须使用第一种方法

使用connect最简单的方法是将mapStateToProps和mapDispatchToProps分离到各自的函数中，以避免出现语法错误，如果您将dispatch作为第二个参数返回，则最好不要使用它，因为如果要连接的第二个参数为空，默认情况下返回分派

根据

[MapDispatchTopPropsDispatch[ownProps]：dispatchProps]对象或 函数：如果传递了一个对象，则假定其中的每个函数 成为Redux action的创建者。具有相同函数名的对象， 但是每一个动作的创建者都会被打包成一个分派呼叫，这样他们就可以 直接调用，将合并到组件的道具中

如果传递了一个函数，它将作为第一个被分派 参数由您来返回以某种方式使用的对象 派遣以您自己的方式绑定动作创建者。提示：您可以使用 Redux中的bindActionCreators帮助程序

如果您的mapDispatchToProps函数声明为使用两个 参数，将使用d调用它 ispatch作为第一个参数，并且 作为第二个参数传递给连接组件的支柱， 并将在连接的组件收到新消息时重新调用 道具。第二个参数通常被称为ownProps 惯例

如果不提供自己的mapDispatchToProps函数或对象 默认的mapDispatchToProps中充满了动作创建者 实现只是将分派注入组件的道具中

你可以像这样使用你的连接站

const mapStateToProps = store => {
    return { discoverSearch: store.discoverSearch }
}

export default connect(mapStateToProps)(DiscoverSearchResultsContainer)

当您使用类似的连接时

export default connect(store => (
      { discoverSearch: store.discoverSearch },
        dispatch => dispatch
))(DiscoverSearchResultsContainer)

实际上，由于您希望返回{discoverSearch:store.discoverSearch}，而不是{discoverSearch:store.discoverSearch}，dispatch=>dispatch，所以您的位置不正确。应该是

export default connect(store => (
      { discoverSearch: store.discoverSearch })
)(DiscoverSearchResultsContainer)

上面的代码片段与

connect(state => state)(...)

export default connect(store => {
          return { discoverSearch: store.discoverSearch }
      }
)(DiscoverSearchResultsContainer)

---

这就是你需要的。但是，您必须使用第一种方法

您的意思是说您能够访问组件中的nextrops.network、nextrops.audioPlayder等？据我所知，这不应该发生，因为您刚刚从mapStateToProps返回了discoverSearch。请尝试在您的connect connect{discoverSearch}=>{discoverSearch}，dispatch=>dispatchMyComponnet中执行此操作。@HardikModha正确，我可以访问所有reducers@G4bri3l这是不可能的，如果我导出defaultstore和reducer，就会出现构建错误。通常我的连接方式如下：导出默认连接状态=>{someProp:state.someProp}，分派=>{actions:bindActionCreatorsmyActions，dispatch}mycomponent您的意思是说您可以访问组件中的nextrops.network、nextrops.audioPlayder等？据我所知，这不应该发生，因为您刚刚从mapStateToProps返回了discoverSearch。请尝试在您的connect connect{discoverSearch}=>{discoverSearch}，dispatch=>dispatchMyComponnet中执行此操作。@HardikModha正确，我可以访问所有reducers@G4bri3l这是不可能的，如果我导出defaultstore和reducer，就会出现构建错误。通常我的连接方式如下：导出默认连接状态=>{someProp:state.someProp}，分派=>{actions:bindActionCreatorsmyActions，dispatch}mycomponent这基本上是正确的。映射分派实际上是不必要的，最终会导致生成错误。删除分派=>dispatch正确映射所有内容，包括分派。是否从提供程序传递调度？@PhilAndrews调度由提供程序的connect隐式传递。mapDispatchToProps传递已绑定到分派的操作创建者，因此您不需要对传递的创建者显式调用它。编辑了答案-最好使用正确的大小写，而不是最小的更改，以使原始工作正常。这基本上是正确的。映射分派实际上是不必要的，最终会导致生成错误。删除分派=>dispatch正确映射所有内容，包括分派。是否从提供程序传递调度？@PhilAndrews调度由提供程序的connect隐式传递。mapDispatchToProps传递已绑定到分派的操作创建者，因此您无需在传递的创建者上显式调用它。编辑了答案-最好使用正确的大小写，而不是最小的更改来生成原始工作。@PhilAndrews，请查看answer@PhilAndrews,请核对答案中的解释