React Redux 搜索缩减器

Question

目前我有以下减速器开关语句。它所做的只是切换侧边栏的状态，所以它首先显示然后隐藏然后显示。这简单。

switch(action.type) {
      case 'SIDEBAR_DISPLAY_TOGGLE':
    return {
      ...state,
      Sidebar : {
        ...state.Sidebar,
        Display : !state.Sidebar.Display
      }
    }
      default:
        return state;
    }

现在我有一个像这里这样的输入字段

人们可以键入以搜索帐户。我正在尝试设置 Redux，因此当用户键入时，它会保存到 Redux 全局状态，我可以从另一个组件中提取它。我已经为它设置了这个 reducer 代码，但我不知道如何将用户类型从该组件中提取到这个 reducer 中？

 function reducer(state = initialState, action) {
    switch(action.type) {
      case 'ACCOUNT_SEARCH':
        return {
          ...state,
          AccountNumberSearch : {
            ...state.AccountNumberSearch,
            AccountNumber : ''
          }
        }
      default:
        return state;
    }
  }
}

Answer 1

动作只是一个具有名为type 的字符串值的对象。此对象的任何其他属性也将被传递，因此您可以使用它来传递键入的文本。

如果您使用函数来创建动作，则类似于：

export function accountNumberSearch(accountNumber) {
    return { type: 'ACCOUNT_SEARCH', accountNumber };
}

然后在您的减速器中，您将能够将状态中的值分配给 action.accountNumber。

      AccountNumberSearch : {
        ...state.AccountNumberSearch,
        AccountNumber : action.accountNumber,
      }

然后您可以像往常一样将您的状态映射到道具（就像您为侧边栏切换所做的那样）。

另外，顺便说一句，您应该考虑使用 combineReducers - Docs 模块化您的减速器 这会比你现在做的方式容易得多。

---

编辑：处理更改

首先，您需要将搜索框的输入字段连接到 onChange 侦听器。如果您像onChange={this.onSearchChange} 一样执行此操作，则可以在函数中从event 获取值：

onSearchChange = event => {
    this.props.AccountNumberSearch(event.target.value);
}

然后在 mapDispatchToProps 中，您将发送您的操作 + 传递的值以发送：

const mapDispatchToProps = dispatch => {
    return {
        AccountNumberSearch: AccountNumber => dispatch(importedActions.AccountNumberSearch(AccountNumber)),
    }
}

然后，在你想要接收这个值的组件中，你可以将 redux 状态映射到 props，比如：

const mapStateToProps = state => {
    return {
        AccountNumber: state.AccountNumberSearch.AccountNumber,
    }
}

然后您可以通过调用 this.props.AccountNumber 在您的渲染函数中访问该值。

如果您需要在此值更改时执行某些操作，您可以随时收听componentDidUpdate，并将该值与旧值进行比较 - 如果更改，请调用您需要执行的任何函数。