CODEWITHSUNDEEP
javascriptreactjsreduxaxiosreducers
adnan tariq
adnan tariq

Reputation: 197

function for filter data does not work after first use

I'm building an app with React, and redux. The purpose of the following is to act as a reducer(attached with a combined Reducer) to the main. I'm importing a filterData function, which works the first time you choose any Action type the first time. Sadly, the filterData function will not after the first action. I think it's got to do with the fact, my first action filters all other data... and has nothing to work with. I need the filter data function to keep working after the user choose any action, and to keep passing the 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;

my Function from another file

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;
        }

    })

}

I also have the following to load the initial data, and dispatch action after Axios sucesfully loaded stuff

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))
            })
    }
}

thank you for ANY HELP.

Upvotes: 0

Views: 368

Answers (1)

Przemysław Zalewski
Przemysław Zalewski

Reputation: 3986

You should consider using selectors to filter the data just before render. This way you keep the source data intact and just switch the filter state.

Reducers now set only the filter state:

...

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

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

...

And you can use a selector to map the state to props within the connect helper:

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)

You can optimize the selectors by using createSelector helper from https://github.com/reduxjs/reselect so they are computed only when their arguments change (memoization/caching).

Upvotes: 1

Related Questions