ReactJs-在reducer中循环和返回状态

时间:2018-08-31 05:38:48

标签: javascript arrays reactjs redux immutable.js

我有一个ID数组

const arr = ["0", "1"];

在我的减速器的情况下,代码看起来像

arr.map((k) => {
      const itemIndex = state.getIn(['tableData', 'dataForTable']).findIndex((item) => item.get('id') === k);
      if (action.actionType === 'deleteMultipleRows') {
        console.log(itemIndex);
        return state
          .deleteIn(['tableData', 'dataForTable', itemIndex]);
      }
      if (action.actionType === 'toggleFlagForMultipleRows') {
        return state
          .setIn(['tableData', 'dataForTable', itemIndex, 'flagStatus'], action.payload.status);
      }
    });

状态看起来像这样

{
  route: {
    location: {
      pathname: '/data/3',
      search: '',
      hash: '',
      key: 'imniz2'
    }
  },
  language: {
    locale: 'en'
  },
  appPage: {},
  dataFilePage: {
    loading: false,
    tableData: {
      dataFileName: {
        id: '1',
        start_date_time: '1502843882',
        end_date_time: '1502930282',
        name: 'Time Tag CSV 12.02.2017',
        component: 'zPV',
        tags: '#abc111 #abc113 #hpv'
      },
      headers: [
        'id',
        'DateTime',
        'ARF_CHWR_Temp',
        'ARF_CHWS_Temp',
        'ARF_SCHWP_Magflo',
        'flagStatus'
      ],
      data: [ ],
      dataForTable: [
        {
          id: '0',
          DateTime: '1534398905',
          ARF_CHWR_Temp: 19.07981,
          ARF_CHWS_Temp: 5.8339,
          ARF_SCHWP_Magflo: 5.150002,
          flagStatus: false
        },
        {
          id: '1',
          DateTime: '1534398965',
          ARF_CHWR_Temp: 19.43713,
          ARF_CHWS_Temp: 5.795691,
          ARF_SCHWP_Magflo: 5.699998,
          flagStatus: false
        },
        {
          id: '2',
          DateTime: '1534398905',
          ARF_CHWR_Temp: 19.17568,
          ARF_CHWS_Temp: 5.805243,
          ARF_SCHWP_Magflo: 5.774999,
          flagStatus: false
        },
      ]
    }
  }
}

我的问题是商店中没有发生更改,我也不知道为什么。我认为这与return中的.map陈述有关。我已经正确地检查了代码,在其他任何地方都没有真正的错误。调度事件后,控制台甚至会显示。

该特定容器的减速器是:-

/*
 *
 * DataFilePage reducer
 *
 */

import { fromJS } from 'immutable';
import { LOAD_DATA_FILE, LOAD_DATA_FILE_SUCCESS, ACTION_DISPATCHED_IN_DATA_TABLE, ACTION_DISPATCHED_IN_DATA_TABLE_SUCCESS } from './constants';

export const initialState = fromJS({
  loading: false,
  tableData: {},
});

function dataFilePageReducer(state = initialState, action) {
  switch (action.type) {
    case LOAD_DATA_FILE:
      return state.set('loading', true);
    case LOAD_DATA_FILE_SUCCESS:
      return state
        .set('tableData', fromJS(action.payload))
        .set('loading', false);
    case ACTION_DISPATCHED_IN_DATA_TABLE:{
      if (action.payload.id !== undefined && action.payload.id !== null) { // for single row operations
        const itemIndex = state.getIn(['tableData', 'dataForTable']).findIndex((item) => item.get('id') === action.payload.id);
        // console.log('reducer item index', itemIndex);
        if (itemIndex !== undefined && itemIndex !== null) {
          if (action.actionType === 'toggleFlag') {
            return state
              .setIn(['tableData', 'dataForTable', itemIndex, 'flagStatus'], action.payload.status);
          }
          if (action.actionType === 'editTableData') {
            return state
              .updateIn(['tableData', 'dataForTable', itemIndex], item => fromJS(action.payload));
          }
          if (action.actionType === 'deleteRow') {
            return state
              .deleteIn(['tableData', 'dataForTable', itemIndex]);
          }
        }
      }
      if (action.payload.selectedRowKeys.length > 0) { // for multiple row operations
        action.payload.selectedRowKeys.map((k) => {
          const itemIndex = state.getIn(['tableData', 'dataForTable']).findIndex((item) => item.get('id') === k);
          if (action.actionType === 'deleteMultipleRows') {
            return state
              .deleteIn(['tableData', 'dataForTable', itemIndex]);
          }
          if (action.actionType === 'toggleFlagForMultipleRows') {
            return state
              .setIn(['tableData', 'dataForTable', itemIndex, 'flagStatus'], action.payload.status);
          }
        });
      }
      return state;
    }
    default:
      return state;
  }
}

export default dataFilePageReducer;

0 个答案:

没有答案