функция фильтра данных не работает после первого использования - PullRequest
Новая
       10

функция фильтра данных не работает после первого использования

0 голосов
/ 13 января 2020

Я создаю приложение с React и Redux. Цель следующего состоит в том, чтобы действовать как редуктор (присоединенный с комбинированным редуктором) к основному. Я импортирую функцию filterData , которая работает при первом выборе любого типа действия в первый раз . К сожалению, функция filterData не будет после первого действия. Я думаю, что это связано с тем фактом, что мое первое действие фильтрует все остальные данные ... и не имеет ничего общего с. Мне нужна функция фильтрации данных, чтобы она продолжала работать после того, как пользователь выбрал какое-либо действие, и продолжала передавать action.payload 

import {
    FETCH_USERS_REQUEST,
    FETCH_USERS_SUCCESS,
    FETCH_USERS_FAILURE,
    STATUS_5500_SUBMITTED_ActionType,
    STATUS_5500_Success_ActionType,
    STATUS_5500_Ready_To_File_ActionType,
    STATUS_5500_Error_ActionType,
    SortingAllPlansAlphabetically
} from "./FakeStuff/userTypes";


import { filterData } from "../../States/AllStates/FakeStuff/userActions";

const initialState = {
    loading: true,
    data: [],
    error: ""
};


const FakeReducer = (state = initialState, action) => {

    switch (action.type) {
        case FETCH_USERS_REQUEST:
            return {
                ...state,
                loading: true
            };
        case FETCH_USERS_SUCCESS:
            return {
                loading: false,
                //data: action.payload,
                data: filterData(action.payload),
                error: ""
            };
        case FETCH_USERS_FAILURE:
            return {
                loading: false,
                data: [],
                error: action.payload
            };


        case STATUS_5500_SUBMITTED_ActionType:
            return {
                data: filterData(state.data, "Submitted"),
            };

        case STATUS_5500_Success_ActionType:
            return {
                data: filterData(state.data, "Success")
            };


        case STATUS_5500_Ready_To_File_ActionType:
            return {
                data: filterData(state.data, "Ready To File")

            };
        case STATUS_5500_Error_ActionType:
            return {
                data: filterData(state.data, "Error")

            };

        case SortingAllPlansAlphabetically:
            return {
                loading: state.loading,
                error: state.error,
                data: console.log("yolo")
            };



        default:
            return state;
    }
};

export default FakeReducer;

моя функция из другого файла 

export const filterData = (Data, searchText) => {
    console.log("filterData's searchText value is : " + searchText)
    return Data.filter(xyz => {

        if (xyz.Status55.includes(searchText)) {
            return true;

        }
        if (xyz.planType.includes(searchText)) {
            return true;
        }

        if (searchText === undefined) {
            return true;
        }

        if (searchText !== undefined) {
            return false;
        }

    })

}

У меня также есть следующее для загрузки исходных данных и действия по отправке после успешно загруженного Axe ios материала 

export const fetchUsers = () => {
    return (dispatch) => {
        dispatch(fetchUsersRequest)
        //axios.get("https://jsonplaceholder.typicode.com/users")
        axios.get("./PublicData/BookOfBusiness.json")
            .then(response => {
                const users = response.data
                dispatch(fetchUsersSuccess(users))

            })
            .catch(error => {
                const ErrorMsg = error.message
                dispatch(fetchUsersFailure(ErrorMsg))
            })
    }
}

спасибо за ЛЮБУЮ ПОМОЩЬ.

1 Ответ

1 голос
/ 13 января 2020

Вам следует рассмотреть возможность использования селекторов для фильтрации данных непосредственно перед рендерингом. Таким образом вы сохраняете исходные данные без изменений и просто переключаете состояние filter.

Редукторы теперь устанавливают только состояние filter: 

...

case STATUS_5500_SUBMITTED_ActionType:
  return {
    ...state,
    filter: "Submitted"
  };

case STATUS_5500_Success_ActionType:
  return {
    ...state,
    filter: "Success"
  };

...

И вы можете использовать селектор для отображения состояние для поддержки в connect помощнике: 

const filterData = ({ data, filter }) => {
  ...filter code goes here - it must return the filtered data
}

const mapStateToProps = state => ({
  data: filterData(state)
})

const ConnectedComponent = connect(mapStateToProps)(MyComponent)

Вы можете оптимизировать селекторы, используя createSelector помощник из https://github.com/reduxjs/reselect, поэтому они вычисляются только при изменении их аргументов (запоминание / кэширование).

...