如何根據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