Question

我对Redux真的很陌生，我想分享一个关于如何实现这个问题的问题。

我确实有一个用React编写的完整应用程序，其中每个页面代表一个React组件。每个React组件都拥有自己的Redux Reducer和操作。

我们举一个非常简单的例子，一个HomePage组件。

class HomePage extends React.Component {
    render() {
        return (
            <h1>Home Page</h1>
        )
    }
}

我有一个reducer，可以修改当前状态，表明应用程序已经完全自举。

export default function homePageReducer(state = {appBootstrapped: false}, action) {
    switch (action.type) {
        case 'APP_BOOTSTRAPPED':
            state = { appBootstrapped: true }
        default:
            return state;
    }
}

Redux行动如下：

export function SetApplicationBootstrapped() {
    return { type: 'APP_BOOTSTRAPPED' }
}

我的组件适合使用上面的Redux实现：

function mapStateToProps(state, ownProps) {
    return {
        homePage: state.homePageReducer
    }
}

export default connect(mapStateToProps)(HomePage);

现在，在我的组件中，我可以调用我的操作来通知React我的应用程序已经完全自举。但是，它感觉不对，因为如果我有10个页面，每个页面由一个组件表示，并且每个组件都有它自己的reducer / actions，我需要实现调用来引导应用程序每个减速机？

这是正常的Redux方法吗？

如果没有，我应该如何处理？

基本思想是我想要一个组件，代表一个加载屏幕，一旦应用程序被引导，我想隐藏它。但由于每个组件只能访问它自己的操作，因此我无法更改另一个组件的状态。我有点迷失了“共享”的想法。因为对我而言，似乎即使使用combineReducers，每个reducer都会管理它自己的状态，而不允许访问另一个reducer的状态。

Answer 1

不确定为什么要限制每个组件只能访问自己的reducer和actions 。在您的情况下，我认为您仍然可以拥有共享状态，例如

{
  shared: { ... },
  pageA: { ... },
  pageB: { ... },
  pageC: { ... }
}

现在您可以将appBootstrapped放入shared，并为此创建共享操作。

您只需要创建一个顶级组件，这样您就只能发送一次SetApplicationBootstrapped。

另外，你不应该改变reducer中的状态：

case 'APP_BOOTSTRAPPED':
    state = { appBootstrapped: true }

只需在case语句中返回状态对象

case 'APP_BOOTSTRAPPED':
    return { appBootstrapped: true }

将CombineReducers与Redux一起使用时如何共享一般状态

1 个答案: