React Redux Search Reducer - PullRequest
Новая
       1

React Redux Search Reducer

0 голосов
/ 29 марта 2019

В настоящее время у меня есть следующий оператор переключения редуктора. Все, что он делает, это переключает состояние боковой панели, поэтому сначала он показывает, затем скрывает, а затем показывает. Это просто. 

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

Теперь у меня есть поле ввода, как здесь enter image description here

, которые люди могут напечатать для поиска аккаунта. Я пытаюсь настроить Redux, чтобы при вводе пользователя он сохранялся в глобальном состоянии Redux и мог извлечь его из другого компонента. У меня настроен код этого редуктора, но я не знаю, как я могу извлечь какие типы пользователей в этот редуктор из этого компонента? 

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

1 Ответ

0 голосов
/ 29 марта 2019

Действие - это просто объект со строковым значением с именем 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)),
    }
}

Затем в компоненте, который вы хотите ПОЛУЧИТЬ это значение, вы должны сопоставить состояние редукса с реквизитом, например: 

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

Затем вы можете получить доступ к этому значению в вашей функции рендеринга, вызвав this.props.AccountNumber.

Если вам нужно что-то сделать при изменении этого значения, вы всегда можете прослушать componentDidUpdate и сравнить значение со старым - если оно изменилось, вызвать любую функцию, которую вам нужно сделать.

...