reactjs - 使用React Redux mapStateToProps的可重用组件

一个React组件OilBarrel连接了我的redux存储以创建一个容器OilBarrelContainer：

// ---- component

class OilBarrel extends Component {
  render() {
     let data = this.props.data;
     ...
  }
}

// ---- container

function mapStateToProps(state) {
  let data = state.oilbarrel.data;
  ...
}

const OilBarrelContainer = connect(mapStateToProps)(OilBarrel)

// ---- reducer

const oilbarrel = (state = {}, action) => {
  let data = state.data;
}

const storeFactory = (server = false, initialState = {}) => {
    return applyMiddleware(...middleware(server))(createStore)(
        combineReducers({oilbarrel, otherReducer1, otherReducer2}),
        initialState
    )
}

我发现奇怪的是，当简化器（方便地）仅接收属于该组件的状态的分支时，mapStateToProps()接收顶级状态对象（应用程序的整个状态），需要我遍历state.oilbarrel.data。

这限制了在不知道容器适合状态层次结构的地方重用该容器的能力。我的mapStateToProps()正在接收完整状态，这是在做错什么吗？

最佳答案

这是mapStateToProps行为。您必须将redux状态视为唯一的事实来源（顺便说一句，就是事实），而与项目中的组件无关。没有出路，您必须知道状态中特定数据的确切层次结构才能将其传递到容器组件。