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

Question

对于我正在编写的 React 组件，我使用 redux 来管理组件的状态。我之前没有真正使用过 redux，所以我在使用我编写的其中一个 reducer 时遇到了一些问题。我的 React 组件中的方法之一发出一个 http 请求，然后通过一个简单的操作函数将数据分派(dispatch)到 reducer 。但是，我为此 reducer 编写了另一个操作来从状态中删除条目，但每当我使用此操作时， reducer 都会返回一个空数组。如有任何帮助，我们将不胜感激。

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

组件方法:

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 函数:

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;

示例数据:

[
 [
  {
      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
  },
 ]
];

<小时/>

更新:

我做了一些测试，得到了一些奇怪的结果。我在 chrome 控制台中执行了相同的代码，一切都运行得很好。但是，reducer 仍然返回一个空数组。

<小时/>

更新#2:

经过进一步的故障排除后，我想我可能对导致状态写入不正确的原因有了更好的了解。我能够让展开运算符正常工作，因此数据不变性此时并不是什么大问题。

但是，在排除故障时我偶然注意到两件事。当 redux 状态发生变化时，保存 redux 状态的组件 props 不会被更新。为了确认这一点，我使用 subscribe 方法在调度操作时向我提供状态。 rawdata 字段填充了我在 redux 状态下查找的数据，但是，数据没有被推送到等效的组件 prop。

我注意到的第二件事是 REMOVE_PROVIDER 操作没有调度，因为订阅方法没有在控制台中报告任何内容。我不确定为什么会发生这种情况，但我认为 filter 可能是原因，因为每当我尝试分派(dispatch)操作时，redux 状态都保持不变。

在这一点上，我确信我遇到的问题更多是react-redux问题，而不是reducer本身的问题。我还冒昧地更新了我的代码片段以反射(reflect)我所看到的内容。

来自 React 组件的 props 日志:

来自 redux 存储的日志条目:

Answer 1

如果您的示例准确，则只需将 REMOVE_PROVIDER 大小写更改为

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

正如您的问题中所写，过滤器将返回名称为“Example Name Here”的所有提供者。他们都不是。您想要相反的结果，即返回名称与输入的名称不匹配的所有提供者。