如何根据 Redux 商店的属性显示/隐藏组件？答案

【问题标题】：How can I display/hide a component depending on a property on the Redux store?如何根据 Redux 商店的属性显示/隐藏组件？
【发布时间】：2018-03-29 08:39:17
【问题描述】：

我正在学习 Redux，但我无法正确理解它。现在我正在用它构建一个个人项目来学习它。

我在导航栏上有这个“设置按钮”（实际上，它是一个列表项）。当我单击它时，我希望另一个组件显示出来。这将是<Settings /> 组件。该组件有一个“关闭按钮”可以隐藏。

我的想法是在 redux 全局存储上拥有这样的属性：settingsOpen: false，当我单击按钮时，它变为 true，组件出现，反之亦然。关闭按钮始终将属性设置为 false 并关闭组件。

这里你可以找到所有代码：https://github.com/lbluigi/react-ecommerce

无论如何，我认为重要的部分是：

Header.js 组件

这是会切换设置组件的单击列表项。

<a onClick={(event) => this.props.toggleSettings(event)} href="#settings" className="nav-link"><i className="fa fa-cog" aria-hidden="true"></i> Settings</a>

Settings.js 组件

这是必须根据settingsOpens 属性出现和消失的组件。

<div className={this.props.settings.settingsOpen ? 'settings' : 'hidden'}>
  <i className="fa fa-times fa-3x" aria-hidden="true"></i>
  {/* just a test <h2>{this.props.settings.themeColor}</h2> */}
</div>

toggleSettings.js 操作 这是我之前写的设置按钮点击事件触发的功能。

event.preventDefault();
return {
  type: 'SETTINGS_TOGGLED'
}

settingsReducer.js 减速器

这是设置初始属性的化简器，用户可以通过与 Settings 组件交互来更改这些属性。

{
  settingsOpen: false,
  themeColor: 'light',
  gridView: 'grid'
}

我可以写更多，但你会在我之前链接的 GitHub 存储库上找到所有内容。我不知道如何在点击时更改属性settingsOpen。

【问题讨论】：

你能发布完整的文件吗？ toggleSettings 是做什么的？你的渲染方法是什么样的？您在哪里将您的操作发送到商店？没有人愿意为了帮助而去你的 github 并挖掘你的 repo。

标签： javascript reactjs redux react-redux store

【解决方案1】：

您的settingsReducer 必须是一个通过调度操作返回对象（状态）的函数。在您的情况下，它应该是：

const defaultSettings = {settingsOpen: false, themeColor: 'light'}
const settingsReducer = (state = defaultSettings, action) {
  if (action.type === 'SETTINGS_TOGGLED') {
    return {
      ...state,
      settingsOpen: !state.settingsOpen
    }
  }
  return state
}

【讨论】：

哦，非常感谢。我花了几个小时才弄明白，这很容易。 Redux 教程太奇怪了。现在我明白我需要定义一个 defaultSettings 对象。

【解决方案2】：

我创建了一个小例子： https://codesandbox.io/s/wq24zkkrvw

基本上我用 isOpen=false 初始化了商店每次点击按钮都会切换 this 的值。

减速器：

const initState = {
  isOpen: false
};
export default (state = initState, action) => {
  switch (action.type) {
    case 'TOGGLE':
      return { isOpen: !state.isOpen };
    default:
      return state;
  }
};

这是将调度操作的组件：

<Counter
      isOpen={store.getState().isOpen}
      onToggle={() => store.dispatch({ type: 'TOGGLE' })}
    />

【讨论】：

【解决方案3】：

如果您想随着时间的推移更改某些商店属性 - 您需要一个减速器。因为 reducer 是负责存储突变（更改）的函数。您已经有一个，但它总是返回相同的值。

function settingsReducer() {
  return {
    settingsOpen: false,
    color: 'light',
    view: 'grid'
  }
}

首先你必须修改它以添加反应 - once action appear, i would want to modify store like this:，

function settingsReducer(state, action) {
    if (action.type === 'SETTINGS_TOGGLED') {
      return {
        settingsOpen: !state.settingsOpen,
        color: 'light',
        view: 'grid',
      };
    }
    return {
      settingsOpen: false,
      color: 'light',
      view: 'grid',
    };
  }

此时您必须创建（定义）action。

之后转到标题中的链接并添加操作的dispatch，而不是返回值。请注意，您必须 connect header 组件进行调度。现在您的操作将出现在减速器中，并且可以修改存储您可以使用某种logger 来检查系统中发生的情况在确保状态按计划更改后 - 您需要将 connect 一个 Settings 组件传递给商店，以将 settingsOpen 属性从商店传递到组件。

这就是您再次返回设置组件的地方，但来自不同的方面。在 redux 中思考总是这样——你必须计划和实现整个循环。有人认为：component handles click -> action -> reducer -> store changes -> component -> render changes

【讨论】：