javascript - 如何使用 Redux 过滤数据但保持旧状态？

Question

我正在使用 Redux 开发搜索功能，但遇到了一些问题。

这些是与搜索内容相关的操作:

export const passengersDataAction = passengersData => ({
  type: ActionTypes.PASSENGERS_DATA,
  // This is the array of objects that I need to search through
  payload: { passengersData }, 
});

export const searchParamAction = searchParam => ({
  type: ActionTypes.SEARCH_PARAM,
  // This is the param that I need to send to passengersData
  // in order to get a new array of objects based on the searchParam
  payload: { searchParam },
});

reducer :

const initialState = {
  passengersData: [],
  searchParam: '',
};

const handlers = {
  [ActionTypes.PASSENGERS_DATA](state, action) {
    return {
      ...state,
      passengersData: action.payload.passengersData,
    };
  },

  [ActionTypes.SEARCH_PARAM](state, action) {
    return {
      ...state,
      searchParam: action.payload.searchParam,
    };
  },
};

顺便说一句，这是对象数组的样子:

[
 {
  "id": 3,
  "name": "Marcos Alonso",
  "address": "Sabana",
  "phone": "712321222",
  "pickup": 0,
  "cardinalpoint": "N",
  "latitude": "9.93683450",
  "longitude": "-84.10991830",
  "timestamp": "2019-02-19 21:23:46",
  "dropofftimestamp": null,
  "pickuptimestamp": null,
  "deleted": null,
  "driver": 1
 },
 ...
]

这是我正在努力让它发挥作用的东西:

   [ActionTypes.SEARCH_PARAM](state, action) {
    //In filter you can add your own logic to get the data
    const searchedData = state.passengersData.filter((passenger) => passenger.name === action.payload.searchParam);

       return {
         ...state,
         passengersData: searchedData,
         searchParam: action.payload.searchParam,
       };
    },

但是对于上面的代码，它将 passesngerData 替换为“searchedData”。我需要保留原始的 passengerData 所以我想我可以在 redux store 中创建一个新状态并从 reducer 返回它。我的问题是，我该怎么做？每次我在输入中键入内容时，整个 passengersData 数组都会消失，并且搜索不会返回任何内容。

我错过了什么？

编辑

我将添加有关处理搜索功能的组件的代码:

// imports
import { searchParamAction } from '../../screens/HomeScreen/actions/homeScreen';

class AllPassengersList extends Component {
  render() {
    const {
      searchParamActionHandler,
      searchParam,
    } = this.props;
    return (
      <View>
          <View>
            <TextInput
              onChangeText={text => searchParamActionHandler(text)}
              value={searchParam}
              placeholder="Search..."
            />
          </View>
        <Text>{searchParam}</Text>
        <PassengerCardBasedOnRoute searchParam={searchParam} />
      </View>
    );
  }
}

AllPassengersList.propTypes = {
  passengersData: PropTypes.oneOfType([PropTypes.array]).isRequired,
  searchParam: PropTypes.oneOfType([PropTypes.string]).isRequired,
  searchParamActionHandler: PropTypes.oneOfType([PropTypes.func]).isRequired,
};

export default compose(
  connect(
    store => ({
      navigationStore: store.homeScreen.navigation,
      searchParam: store.homeScreen.searchParam,
      passengersData: store.homeScreen.passengersData,
    }),
    dispatch => ({
      searchParamActionHandler: value => {
        dispatch(searchParamAction(value));
      },
    }),
  ),
)(AllPassengersList);

上面的组件是保存搜索文本输入的组件。下面的那个是我渲染需要过滤的对象数组的那个:

import { View } from 'react-native';
import React from 'react';
import PropTypes from 'prop-types';
import { compose } from 'redux';
import { connect } from 'react-redux';
import PassengersInfo from './PassengerInfo';

import { popupsModalsAction } from '../PopupsModals/actions/popupsModals';

const PassengerCardBasedOnRoute = ({
  navigationStore,
  passengersData,
  popupsModalsActionHandler,
  searchParam,
}) => {
  return (
      <View>
        {passengersData.map(info => (
            <PassengersInfo
              key={info.id}
              id={info.id}
              searchParam={searchParam}
              cardinalpoint={info.cardinalpoint}
              name={info.name}
              address={info.address}
              datetime={info.timestamp}
            />
          ))}
      </View>
  );
};

PassengerCardBasedOnRoute.propTypes = {
  passengersData: PropTypes.oneOfType([PropTypes.array]).isRequired,
  searchParam: PropTypes.oneOfType([PropTypes.string]).isRequired,
};

export default compose(
  connect(
    store => ({
      passengersData: store.homeScreen.passengersData,
      searchParam: store.homeScreen.searchParam,
    }),
  ),
)(PassengerCardBasedOnRoute);

所以 passengersData 是处理我需要的数据的数组。

Answer 1

您不应该在 redux store 中过滤数据并将结果分配给您从中过滤数据的变量，因为这样在每次搜索时您都会丢失原始数据，而只是将 searchParam 存储在 store并编写一个返回筛选结果的选择器并在组件中使用它

const filterSelector = (state, props) => {
    return state.passengersData.filter((passenger) => passenger.name === state.searchParam);
}

const mapStateToProps = (state, props) => {
   const searchData = filterSelector(state, props);
   return {
       searchData
   }
}

你的 reducer 就是

[ActionTypes.SEARCH_PARAM](state, action) {
       return {
         ...state,
         searchParam: action.payload.searchParam,
       };
    }

编辑:用例子更新代码

// imports
import { searchParamAction } from '../../screens/HomeScreen/actions/homeScreen';

class AllPassengersList extends Component {
  render() {
    const {
      searchParamActionHandler,
      searchParam,
    } = this.props;
    return (
      <View>
          <View>
            <TextInput
              onChangeText={text => searchParamActionHandler(text)}
              value={searchParam}
              placeholder="Search..."
            />
          </View>
        <Text>{searchParam}</Text>
        <PassengerCardBasedOnRoute searchParam={searchParam} />
      </View>
    );
  }
}

AllPassengersList.propTypes = {
  passengersData: PropTypes.oneOfType([PropTypes.array]).isRequired,
  searchParam: PropTypes.oneOfType([PropTypes.string]).isRequired,
  searchParamActionHandler: PropTypes.oneOfType([PropTypes.func]).isRequired,
};

const filterSelector = (passengersData, searchParam) => {
     return passengersData.filter((passenger) => searchParams == '' || passenger.name === searchParam);
}

const mapStateToProps = store => ({
      navigationStore: store.homeScreen.navigation,
      searchParam: store.homeScreen.searchParam,
      passengersData: filterSelector(state.homeScreen.passengersData, state.homeScreen.searchParam),
}),
export default compose(
  connect(

    dispatch => ({
      searchParamActionHandler: value => {
        dispatch(searchParamAction(value));
      },
    }),
  ),
)(AllPassengersList);
,