Редуктор поиска React Redux
В настоящее время у меня есть приведенный ниже оператор переключателя редуктора. Все, что он делает, это переключает состояние боковой панели, поэтому сначала она отображается, затем скрывается, а затем отображается. Это просто.
switch(action.type) {
case 'SIDEBAR_DISPLAY_TOGGLE':
return {
...state,
Sidebar : {
...state.Sidebar,
Display : !state.Sidebar.Display
}
}
default:
return state;
}
Теперь у меня есть поле ввода, как здесь
которые люди могут ввести для поиска учетной записи. Я пытаюсь настроить Redux, чтобы при вводе пользователем он сохранялся в глобальном состоянии Redux, и я мог извлечь его из другого компонента. У меня есть этот код редуктора, но я не знаю, как я могу вывести типы пользователей в этот редуктор из этого компонента?
function reducer(state = initialState, action) {
switch(action.type) {
case 'ACCOUNT_SEARCH':
return {
...state,
AccountNumberSearch : {
...state.AccountNumberSearch,
AccountNumber : ''
}
}
default:
return state;
}
}
}
Ответы 1
Действие — это просто объект со строковым значением с именем type. Любые другие свойства этого объекта также будут переданы, поэтому вы используете это для передачи набранного текста.
Если вы используете функцию для создания своих действий, что-то вроде строк:
export function accountNumberSearch(accountNumber) {
return { type: 'ACCOUNT_SEARCH', accountNumber };
}
Затем в вашем редюсере вы сможете присвоить значение в состоянии action.accountNumber.
AccountNumberSearch : {
...state.AccountNumberSearch,
AccountNumber : action.accountNumber,
}
Затем вы можете сопоставить свое состояние с реквизитами, как обычно (как вы сделали для переключателя боковой панели).
Кроме того, вы должны изучить модульность своих редукторов с помощью combineReducers - Документы.
Это было бы намного проще, чем то, как вы это делаете.
Обновлено: обработка изменений
Прежде всего, вам нужно подключить поле ввода для окна поиска к слушателю 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 и сравнить значение со старым — если оно изменилось, вызовите любую функцию, которую вам нужно сделать.
как я могу отправить изменения в действие accountNumberSearch? У меня было это действие export const AccountNumberSearch = () => ({ type: "ACCOUNT_NUMBER_SEARCH" });, которое я обновил до export const AccountNumberSearch = (accountNumber) => ({ type: "ACCOUNT_NUMBER_SEARCH", accountNumber }); и добавил его в редуктор AccountNumber : action.accountNumber,, но не знаю, как я могу обновить его по мере того, как пользователь вводит данные в поле ввода на странице?
поэтому на вашем mapStateToProps другого компонента, который вы хотите получить обновление, вы должны сопоставить state.AccountNumberSearch.AccountNumber с опорой, например AccountNumber: state.AccountNumberSearch.AccountNumber,
затем вы даже можете прослушивать изменения в componentDidUpdate этого компонента, завернув его в if (prevProps.AccountNumber !== this.props.AccountNumber && this.props.AccountNumber !== null) { ... }, вы можете вызвать другое действие, например действие API, например, для получения результатов.
хорошо, и у меня есть это для поля ввода value: AccountNumber, onChange: this.updateAccountNumber('AccountNumber'), теперь поле ввода загружается с тем, что я набрал по умолчанию в хранилище избыточности, но я не могу это изменить... это update function updateAccountNumber = name => (event, { newValue }) => {AccountNumberSearch(event.target.value) }
вы не можете просто вызвать действие, которое просто вернет объект. Вам нужно передать объект в dispatch(...) либо из вашего магазина, либо из mapDispatchToProps
Попался, я добавил, что тоже все так же const mapDispatchToProps = { AccountNumberSearch } export default compose( withStyles(styles, { withTheme: true }), connect(mapStateToProps, mapDispatchToProps), )(AccountSearch);
@Extelliqent Я обновил свой ответ, чтобы объяснить, как связать все это вместе.
Спасибо @Jamie, все, кроме 4-го поля кода, которое я применил, дает ошибку importedActions ... В настоящее время это то, что у меня есть с точки зрения карты для состояния, карты для реквизита и экспорта function mapStateToProps(state) { return { AccountNumber: state.AccountNumberSearch.AccountNumber, } } const mapDispatchToProps = { AccountNumberSearch } export default compose( withStyles(styles, { withTheme: true }), connect(mapStateToProps, mapDispatchToProps), )(AccountSearch);
Давайте продолжить обсуждение в чате.
Я думаю, что проблема с моим редюсером, я внес в него изменения, что бы я ни делал, я не заставляю диспетчера проходить этот раздел редуктора switch(action.type) { case 'ACCOUNT_NUMBER_SEARCH': return { ...state, AccountNumberSearch : { ...state.AccountNumberSearch, AccountNumber : action.accountNumber, } }, а действие такое export const AccountNumberSearch = (accountNumber) => ({ type: "ACCOUNT_NUMBER_SEARCH", accountNumber: accountNumber });
соглашение состоит в том, чтобы поместить значение в
action.payload, но это зависит от того, что делает ваше действие и как вы его вызываете/отправляете. Пожалуйста, опубликуйте соответствующий код. Также имейте в виду, что использование хранилища избыточности для каждого нажатия клавиши может быть излишним. Возможно, вы захотите использовать локальное состояние для управления полем и либо отменить сохранение в хранилище избыточности, либо сохранить его после некоторого дополнительного действия пользователя, например нажатия кнопки.