与Redux反应原生|如何过滤数据并保持初始数据处于reudx状态

Question

我使用React-Native和Redux为我的移动应用程序实现了一个简单的搜索功能，我从API获取数据并将它们保存在我的redux存储中，所以当app运行时，我已经有了一个项目列表。

现在我有一个搜索框，我想根据关键字过滤当前列表，因为列表已经从redux商店获取数据，我认为我需要将过滤器应用于同一属性，但是我如何保持初始我从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;
  }
}

这是我使用combineReducers的地方：

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组件，但我总是得到空列表，但是当我通过我的redux商店道具this.props.cryptoData它将显示所有列表，所以现在我不知道是当用户输入内容时如何在列表中包含我的过滤数据，以及当文本框为空时还包含我的所有数据。

我希望这次解释清楚。

Answer 1

我知道Redux State是事实的唯一来源，但我认为在这种情况下，我们需要一个组件级别状态，只有我们的父组件可见，所以感谢这个article我添加了一个组件状态到我的像这样的父组件：

 state = {
    currentlyDisplay : []
 }

基于用户输入，我将更新此状态，因此如果搜索框为空，我将使用Redux Application Level状态更新它（使用mapStateToProps映射），如果用户尝试过滤，我将使用过滤后的数据更新它，所以在在这种情况下，我可以将currentlyDisplay传递给我的子组件，它将呈现列表。这种方法给了我我需要的东西，如果有人需要，我会分享这个。让我知道如果有更好的方法达到相同的结果，我会很乐意学习。