React-Redux搜索缩减器

目前我有以下减速机开关声明。它所做的只是切换侧边栏的状态，所以它首先显示然后隐藏然后显示。这很容易

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

---

动作只是一个具有名为

type

的字符串值的对象。此对象上的任何其他属性也将被传递，因此您可以使用它来传递键入的文本

如果您正在使用函数创建操作，请遵循以下几点：

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

然后在减速器中，可以将状态中的值分配给action.accountNumber

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

然后你可以像平常一样将你的状态映射到道具上（就像你在边栏切换中所做的那样）

另外，您还应该使用组合减速机查看减速机 这比你现在做的要容易得多

---

编辑：处理更改

首先，您需要将搜索框的输入字段连接到onChange侦听器。如果像

onChange={this.onSearchChange}

那样执行此操作，则可以从函数中的

event

获取值：

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

然后，在

mapDispatchToProps

中，将您的操作+传递的值发送到dispatch：

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

然后，在您想要接收该值的组件中，将redux状态映射到props，如：

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

然后，您可以通过调用

this.props.AccountNumber

在渲染函数中访问该值

---

如果此值更改时需要执行某些操作，则可以始终收听

componentDidUpdate

，并将该值与旧值进行比较-如果该值更改，调用您需要执行的任何函数。

一个惯例是将值放入

action.payload

中，但这取决于您的操作是什么以及如何调用/释放它。请张贴相关代码。还请记住，每次击键都使用redux存储可能有点过头了。您可能希望使用本地状态来控制字段，或者将存储取消装箱到redux存储，或者在一些额外的用户操作（如按下按钮）后将其存储。如何将更改发送到

accountNumberSearch

操作？我有这个动作

export const AccountNumberSearch=（）=>（{type:“ACCOUNT\u NUMBER\u SEARCH”}）我更新为导出const AccountNumberSearch=（accountNumber）=>（{type:“ACCOUNT\u NUMBER\u SEARCH”，accountNumber}）

并将其添加到reducer

AccountNumber:action.AccountNumber，

中，但我不知道如何将其作为用户类型更新到页面上的输入字段？因此，在要接收更新的其他组件的

MapStateTrops

上，您需要将

state.AccountNumber搜索.AccountNumber

映射到一个属性，类似于

AccountNumber:state.AccountNumberSearch.AccountNumber，

您甚至可以通过在

if（prevProps.AccountNumber！==this.props.AccountNumber&&this.props.AccountNumber！==null）{…}

中包装该组件，来侦听该组件上的更改，例如，您可以调用另一个操作（如API操作）来获取结果。好的，我为输入字段

value:AccountNumber，onChange:this.updateAccountNumber（'AccountNumber'），

now输入字段加载了我在redux存储中默认键入的内容，但我无法更改它。。。这是

updatefunction updateAccountNumber=name=>（event，{newValue}）=>{AccountNumberSearch（event.target.value）}

您不能只调用该操作，它只会返回一个对象。您需要将对象从存储区或从

mapDispatchToProps