Фильтрация на стороне клиента с использованием useReducer - PullRequest
Новая
       15

Фильтрация на стороне клиента с использованием useReducer

0 голосов
/ 03 апреля 2019

У меня есть таблица транзакций, которая содержит некоторые данные. Я пытаюсь сделать фильтр на стороне клиента по изменению поискового ввода.

Сначала работает, до следующего события onChange фильтрует ранее отфильтрованные данные, а не исходные.

Как я могу сделать так, чтобы он всегда фильтровал начальное состояние при каждом событии onChange?

Если есть лучший способ сделать это, пожалуйста, скажите мне 

//Table
const [transactions, setTransactions] = useReducer(
    transactionsReducer,
    fetchTransactions()
  )

//Reducer
const transactionsReducer = (state, action) => {
  switch (action.type) {
    case 'filter':
      return action.transactions.filter(item =>
        item.description.includes(action.searchTerm)
      )

    default:
      return state
  }
}

//Search component (it receives setTransactions function as a prop)
const Search = ({ setTransactions }) => {
  const handleChange = event => {
    setTransactions({
      type: 'filter',
      searchTerm: event.target.value
    })
  }

  return (
    <form>
      <Input
        type="text"
        name="search"
        placeholder="search"
        onChange={handleChange}
      />
    </form>
  )
}

1 Ответ

0 голосов
/ 03 апреля 2019

Я передал транзакции компоненту поиска из fetchTransactions (), например, 

<Search
  setTransactions={setTransactions}
  transactions={fetchTransactions()}
/>

, а затем передал эти транзакции моему редуктору как действие: 

const handleChange = event => {
   setTransactions({
     type: 'filter',
     transactions, //like this
     searchTerm: event.target.value
   })
}

и отфильтровал этотранзакции в моем редукторе: 

const transactionsReducer = (state, action) => {
  switch (action.type) {
    case 'filter':
      return action.transactions.filter(item =>
        item.description.includes(action.searchTerm)
      )

    default:
      return state
  }
}

и работает нормально.Если есть лучшие подходы к этому, пожалуйста, дайте мне знать

...