如何根据Redux存储上的属性显示/隐藏组件？

Question

我正在研究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操作这是我之前编写的设置按钮上的click事件触发的功能。

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

settingsReducer.js减速器

这是化简器，用于设置用户可以更改的初始属性，以与“设置”组件交互。

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

我可以写很多东西，但是您会在我之前链接的GitHub存储库中找到所有内容。 我不知道如何继续更改属性settingsOpen 。

Answer 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
}

Answer 2

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

基本上，我使用isOpen = false初始化商店，并且每次您单击按钮时都会切换此值。

减速器：

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' })}
    />

Answer 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 。

之后，转到标题中的链接，并添加动作的分派 ，而不是返回值。 请注意，必须连接 header组件才能进行分派。 现在，您的操作将出现在reducer中，并且将能够修改存储。您可以使用某种记录器来检查系统中正在发生的事情确保状态按计划进行了更改之后-您需要连接 Settings组件到商店以将settingsOpen属性从商店传递到组件。

那就是您从另一侧再次返回到“设置”组件的位置。 在redux中思考总是这样-您必须计划和实施整个循环。 像这样： component handles click -> action -> reducer > store changes -> component -> render changes