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

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，我需要实现调用以在每个 reducer 中引导应用程序？

这是正常的 Redux 方法吗？

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

基本想法是我想要一个组件，代表一个加载屏幕，一旦应用程序启动，我想隐藏它。 但是由于每个组件只能访问它自己的操作，我无法更改另一个组件的状态。我对“共享”状态的想法有点迷茫，因为在我看来，即使使用 combineReducers，每个减速器都管理自己的状态，不允许访问另一个减速器的状态。

Answer 1

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

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

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

---

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

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

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

在case语句中直接返回状态对象

case 'APP_BOOTSTRAPPED':
    return { appBootstrapped: true }