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 reducer

这是reducer，它设置用户可以更改与Settings组件交互的初始属性。

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

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

这是您再次返回设置组件的位置，但是从不同的方面。在redux中思考总是这样 - 你必须计划和实现整个循环。有些想法：component handles click - ＆gt; action - ＆gt; reducer - ＆gt; store changes - ＆gt; component - ＆gt; render changes

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

3 个答案: