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

Question

我是 Redux 的新手，我想分享一个关于我应该如何实现它的问题。

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

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

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

我确实有一个 reducer 可以修改当前状态，指示应用程序已完全 bootstrapped。

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 我的应用程序已完全 bootstrapped。但是，感觉不对，因为如果我有 10 个页面，每个页面由一个组件表示，并且每个组件都有自己的 reducer/actions，我需要在 bootstrap 中实现对应用程序的调用每个减速器？

这是正常的 Redux 方法吗？

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

基本想法是我想要一个组件，代表一个加载屏幕，我想在 bootstrapped 应用程序后立即隐藏它。但是由于每个组件只能访问它自己的操作，所以我无法更改另一个组件的状态。我对 'shared' 状态的想法有点迷茫，因为在我看来，即使使用 combineReducers，每个 reducer 都管理它自己的状态，不允许访问另一个 reducer 的状态。

Answer 1

不确定为什么要限制每个组件只能访问自己的减速器和操作。在你的情况下，我认为你仍然可以有一个共享状态，例如

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

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

你只需要创建一个顶层组件，所以你只能调度SetApplicationBootstrapped一次。

此外，您不应该改变减速器中的状态：

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

只是 return case 语句中的状态对象

case 'APP_BOOTSTRAPPED':
    return { appBootstrapped: true }

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

How to share a general state when using CombineReducers with Redux

reactjs

redux

react-redux