redux reducer在过滤状态时返回空数组

Question

For a react component I'm writing I'm using redux to manage the state of the component. I haven't really used redux before so I've been running into some issues with one of the reducers i've written. One of the methods in my react component makes a http request then dispatches the data to the reducer through a simple action function. However, I have another action written for this reducer to delete entries from the state, but whenever I use this action the reducer returns a empty array. Any help is appreciated.

reducer :

export function Weeklystate(state=[], action){
    switch(action.type){
        case 'ADD_PROVIDER':
            return [...state, action.arr];

        case 'REMOVE_PROVIDER':
            const newstate = [...state];

            return newstate.filter((provider) => provider[0].full_name.toLowerCase().indexOf(action.str) === -1);

        default:
           return state;
    }
}

actions.js :

export function addProvider(arr){
    return {
        type: 'ADD_PROVIDER',
        arr
    };
}

export function removeProvider(str){
    return {
        type: 'REMOVE_PROVIDER',
        str
    };
}

Component methods :

getData(){
    const { url, queries } = this.state;
    let data_arr = [];

    const que = queries.map(function(query){
        let postquery = {
            full_name: query.name,
            date_start: query.startdate,
            date_end: query.enddate
         };

         return axios.post(url, postquery);
    });

    axios.all(que).then((responses) => {
        responses.forEach((response) => {
          this.props.addProvider(response.data);
        });
    });
}

componentWillMount(){
    this.getData();
    this.props.removeProvider('Example Name here');
    const { rawdata } = this.props;

    return console.log(this.props);
}

MaptoProps functions :

function mapStateToPropsBETA(state){
    return {
        rawdata: state.rawdata,
        parseddata: state.parseddata
    };
}

function mapDispatchtoProps(dispatch){
    return bindActionCreators({
        addProvider: addProvider,
        removeProvider: removeProvider

    }, dispatch);
}

export default connect(mapStateToPropsBETA, mapDispatchtoProps)(Weekly_Beta);

stores.js :

const WeeklyStore = createStore(reducer);

WeeklyStore.subscribe(() => {
    console.log(WeeklyStore.getState());
});

export default WeeklyStore;

sample data :

[
 [
  {
      first_name: "First Name Here...", 
      last_name: "Last Name Here...",
      full_name: "Full Name Here",
      date: "2016-01-17",
      charges: {
          cosmetic: 25000.00,
          medical: 25000.00,
          total: 50000.00
      },
      payments: 75000.00,
      appointments: 99,
      pk: 5
  }, 
  {
      first_name: "First Name Here...", 
      last_name: "Last Name Here...",
      full_name: "Full Name Here",
      date: "2016-01-24",
      charges: {
          cosmetic: 25000.00,
          medical: 25000.00,
          total: 50000.00
      },
      payments: 75000.00,
      appointments: 99,
      pk: 5
   }, 
 ],
[
 {
     first_name: "First Name Here...", 
     last_name: "Last Name Here...",
     full_name: "Full Name Here",
     date: "2016-01-17",
     charges: {
         cosmetic: 25000.00,
         medical: 25000.00,
         total: 50000.00
     },
     payments: 75000.00,
     appointments: 99,
     pk: 5
 }, 
 {
      first_name: "First Name Here...", 
      last_name: "Last Name Here...",
      full_name: "Full Name Here",
      date: "2016-01-24",
      charges: {
          cosmetic: 25000.00,
          medical: 25000.00,
          total: 50000.00
      },
      payments: 75000,
      appointments: 99,
     pk: 5
  },
 ]
];

---

UPDATE :

I did some testing and I got some bizarre results. I executed the same code inside of the console on chrome and my everything ran just fine. However, the reducer is still returning a empty array.

---

UPDATE #2 :

After some further troubleshooting I think I might have a better idea of what's causing the state to write improperly. I was able to get the spread operator working so data immutability isn't much of an issue at this point.

However, there's two things that I happened to notice when troubleshooting. The component props that hold my redux state are not being updated when the redux state changes. To confirm this I used the subscribe method to give me the state whenever a action is dispatched. The field for rawdata is populated with the data I'm looking for in my redux state, however, the data is not being pushed to the equivalent component prop.

The second thing I noticed is that the REMOVE_PROVIDER action isn't dispatching as the subscribe method doesn't report anything back in the console. I'm not sure why this is happening, but I think the filter perhaps may be the cause as the redux state remains untouched whenever I try dispatching the action.

At this point I'm convinced that the problems I'm having are more of react-redux issue rather than being a problem with reducer itself. I've also taken the liberty of updating my code snippets to reflect what I'm seeing.

log of props from react component :

log entries from redux store :

Answer 1

If your example is accurate, then just change the REMOVE_PROVIDER case to

case 'REMOVE_PROVIDER':
            return newstate.filter((provider)=> provider[0].full_name.indexOf(action.data) === -1);

As it's written in your question, the filter is returning all providers who have the name "Example Name Here". That's none of them. You want the opposite, that is, to return all of the providers whose names don't match the entered name.

Answer 2

1. Firstly, your ADD_PROVIDER is mutating the state directly, adding newstate = state doesn't copy the state array, as it only creates an reference to the state.

2. For your ADD_PROVIDER , what is action.data ? According to your actions, itself is already an array, yet you are wrapping it with another array notation, your state becomes array of arrays of array. -____-?.

3. As the other answer suggested, your REMOVE_PROVIDER logic is wrong, you are keeping all the prodiver s whose fullname has action.data .

To fix, your reducer should be:

export function Weeklystate(state=[], action){
    switch(action.type){
    case 'ADD_PROVIDER':
        return [...state, action.data]; // this returns a new array

    case 'REMOVE_PROVIDER':
        // this will keep provider whose full_name does not have action.data
        return state.filter((provider)=>provider[0].full_name.indexOf(action.data.full_name) === -1);

    default:
        return state;
    }
}

As my second point suggest, I am not sure how you want your state to look like, so fix accordingly. With this code, I assume ADD_PROVIDER action.data is an array with 1 element.