Реагировать на родной с Redux | Как фильтровать данные и сохранять исходные данные в состоянии reudx

Question

Я реализую простую функцию поиска для своего мобильного приложения, используя React-Native & Redux, я извлекаю данные из API и сохраняю их в своем хранилище приращений, поэтому, когда приложение работает, у меня уже есть список элементов.

Теперь у меня есть окно поиска, и я хочу отфильтровать текущий список на основе ключевого слова, поскольку список уже получает данные из хранилища избыточных данных, я предполагаю, что мне нужно применить фильтр к тому же свойству, но тогда как я могу это сделать? сохранить исходный, который я уже получил от API?

Вот мои действия:

import { GET_CRYPTO_DATA, FILTER_CRYPTO_DATA } from './types';

export function GetCryptoData(data){
  return {
    type: GET_CRYPTO_DATA,
    payload: data
  }
}

export function FilterCryptoData(filteredData) {
  return {
    type: FILTER_CRYPTO_DATA,
    payload: filteredData
  }
}

Итак, у первого будут все данные, а у второго - filteredData

Это мой редуктор:

import { GET_CRYPTO_DATA, FILTER_CRYPTO_DATA } from '../actions/types';

export default function(state= {}, action){
  switch (action.type){
    case GET_CRYPTO_DATA:
        return [...state, action.payload]
    case FILTER_CRYPTO_DATA:
        return [...state, action.payload]
    default:
        return state;
  }
}

и здесь я использую объединениеReducers:

import { combineReducers } from 'redux';

import CryptoDataReducer from './CryptoDataReducer';

export default combineReducers({
    cryptoData : CryptoDataReducer
})

Я думаю, что-то не так с тем, как я обновляю магазин. Кто-нибудь может мне помочь с этим?

UPDATE

Позвольте мне поделиться с вами моими дочерними компонентами, возможно, сделать это более понятным, поэтому вот что я отображаю в своем родительском компоненте:

render() {
return (
    <View style={styles.container}>
      <HeaderComponent />
      <SearchComponent search={this.handleSearch} />
      <CryptoListComponent myList={this.props.cryptoData}/>

    </View>
);
}

Как вы можете видеть, у меня есть <SearchComponent search={this.handleSearch} /> компонент, который имеет текстовое поле и кнопку, и он просто передает мне ключевое слово, введенное пользователем для фильтрации данных. и в моем this.handleSearch я буду фильтровать данные следующим образом:

let filteredData = []
handleSearch = (keyword) => {
  let result = []
  if(keyword===''){
    filteredData = this.props.cryptoData
  } else {
    this.props.cryptoData.map(item => {
        if (item.name.toLowerCase().startsWith(keyword.toLowerCase())) {
            result.push(item)
        }
    })
    filteredData = result
  }
}

Итак, теперь у меня есть filteredData, я попытался передать это как реквизиты моему компоненту CryptoListComponent, но я всегда получаю пустой список, но когда я передаю свои реквизиты хранилища резервов this.props.cryptoData, он покажет весь список Итак, теперь я не знаю, как сделать так, чтобы мои отфильтрованные данные были в списке, когда пользователь что-то вводил, а также все мои данные, когда текстовое поле пусто.

Надеюсь, на этот раз я объяснил достаточно ясно.

Answer 1

Я знаю, что Redux State является единственным источником правды, но я думаю, что в этом случае нам нужно иметь состояние уровня компонента, которое будет видно только нашему родительскому компоненту, поэтому благодаря этой статье 1002 * Я добавил состояние компонента в родительский компонент следующим образом:

 state = {
    currentlyDisplay : []
 }

и на основе пользовательского ввода я обновлю это состояние, поэтому, если поле поиска пусто, я обновлю его с состоянием уровня приложения Redux (сопоставленным с использованием mapStateToProps), и если пользователь попытается отфильтровать, я обновлю его с использованием отфильтрованных данных в этом случае я могу передать currentlyDisplay моему дочернему компоненту, который будет отображать список. Такой подход дает мне то, что мне нужно, я делюсь этим на случай, если кому-то нужно. Дайте мне знать, если есть лучший способ достичь того же результата, я буду рад узнать.