我如何 display/hide 一个依赖于 Redux 商店上的属性的组件？

Question

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

我在导航栏上有这个 "Settings button"（实际上，它是一个列表项）。单击它时，我希望另一个组件显示出来。这将是 <Settings /> 组件。该组件有一个 "Close button" 要隐藏。

我的想法是在 redux global store 上有一个属性像这样：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>

切换Settings.js 操作 这是我之前写的设置按钮点击事件触发的函数

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

settingsReducer.js减速器

这是设置初始属性的缩减器，用户可以通过与“设置”组件进行交互来更改这些属性。

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

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

Answer 1

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

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 是负责存储突变（更改）的功能。你已经有了一个，但它总是 return 相同的值。

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.

之后继续在您的页眉中添加 link 并添加 dispatch of an action instead returning value. Note that you have to connect header 组件以进行调度。现在你的 action 将出现在 reducer 中并且能够修改 store 您可以使用某种 logger 来检查您的系统中发生了什么确保状态按计划更改后 - 您需要 connect 一个 Settings 组件到商店以将 settingsOpen 属性从商店传递到组件。

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

我如何 display/hide 一个依赖于 Redux 商店上的属性的组件？

How can I display/hide a component depending on a property on the Redux store?

javascript

store

reactjs

redux

react-redux

我如何 display/hide 一个依赖于 Redux 商店上的 属性 的组件？

How can I display/hide a component depending on a property on the Redux store?

javascript

store

reactjs

redux

react-redux

我如何 display/hide 一个依赖于 Redux 商店上的属性的组件？