使用 Redux 存储更新帮助文件答案

【问题标题】：Update helper file with Redux store使用 Redux 存储更新帮助文件
【发布时间】：2018-02-01 03:35:36
【问题描述】：

我有一个 Colors.js 文件，其中包含一些变量，例如：

const textColor = 'white';
const primaryColor = 'blue';

然后我在组件样式中导入这个文件并使用它：

import Colors from './Colors';
const styles = {
    component: { color: Colors.textColor }
}

现在我想将此 Colors.js 文件连接到我的 redux 商店；所以我可以为我的应用程序设置主题。例如，将我的 Colors.js 文件包装在一个连接函数中，但是，这不起作用，因为 Colors.js 在存储初始化之前被调用。

我也试过 getState() 并手动导入商店，但我没有收到任何道具。

我可以采取不同的方法吗？

谢谢。

【问题讨论】：

标签： reactjs react-native redux

【解决方案1】：

将colors.js 变成reducer 并这样设置。在 reducer 中，将您的 initialState 设置为您需要的默认颜色，并导出该 initialState 对象，以便您可以将其导入其他文件中。现在您可以导入该 initialState 并在应用程序中任何您想要的地方使用它，这将是恒定的，并且您将在 redux 存储中拥有相同的颜色对象，您可以连接到您拥有的任何组件并使用和操作它，使用 redux 操作。

【讨论】：

嗨，我想过这个方法，但我需要在我的组件 styles.js 文件中获取 redux 状态。当我这样做时，它会在设置 redux 存储之前被调用，因此所有道具都是未定义的。我的主要麻烦是找到解决方法。感谢您的帮助！
为此，您可以尝试使用redux-persist。它是一个 NPM 包，即使在您关闭/退出应用程序后，它也可以让您存储您的 redux 数据，并且在您重新打开时，它会自动将持久化的数据放入 redux 存储区，而不是硬编码的 initialState。您可以将颜色内容保存在单独的减速器中，并选择仅保留该特定减速器。并使用persist-gateway 延迟应用程序渲染，直到redux-persist 加载您的数据介绍存储，从而确保在渲染时它不是未定义的。我希望你觉得这个答案有帮助。祝你好运。