Реагировать - магазин обновлен, но не повторно визуализировать компонент

Question

Сценарий таков: 1. Нажмите кнопку (Компонент класса A), чтобы добавить элемент в список (Компонент класса B), а затем повторно отредактируйте таблицу.

Я проверил список вstore by store.getState () И я полностью обновил список в магазине после нажатия кнопки.

Но он не отобразил таблицу, в которой показан список.

Кто-нибудь может помочь?

initialState3

var initialState3 = {
  products1: [
    {
      id: "123",
      abbreviation: "123",
      case_no: "123",
      created_dt: "31/01/2018",
      last_updated: "11:43:45"
    }
  ]
};

Редукторы

function ReducersForSeach(state = initialState3, action) {
  switch (action.type) {
    case "CLICK_SEARCH": {
      products1.push({
        id: "456",
        abbreviation: "456",
        case_no: "456",
        created_dt: "31/01/2018",
        last_updated: "11:43:45"
      });

      return {
        ...state,
        products1
      };
    }
  }
}

Компонент

var Table = React.createClass({
  render() {
    const { products1 } = this.props;
    const tableHeaderColumns = columnData.map(column => (
      <TableHeaderColumn dataField={column.action} isKey={column.isKey} dataSort={column.dataSort}>
        {column.description}
      </TableHeaderColumn>
    ));

    return (
      <BootstrapTable height="600" style={{ overflowY: "scroll" }} data={products1} options={options}>
        {tableHeaderColumns}
      </BootstrapTable>
    );
  }
});

Соединение

function mapStateToPropsFortable(state) {
  return {
    products1: state.reducreForSeach.products1
  };
}

const Table1 = connect(
  mapStateToPropsFortable,
  null
)(Table);

ReactDOM.render(
  <Provider store={store}>
    <Table1 />
  </Provider>,

  document.getElementById("divReqListTable")
);

Магазин

var rootReducer = Redux.combineReducers({
  reducreForAge,
  reducreForButtonGroup2,
  reducreForSeach
});

var store = Redux.createStore(rootReducer);

Answer 1

Замените свой редуктор на этот

function ReducersForSeach(state = initialState3, action) {
  switch (action.type) {
    case "CLICK_SEARCH": {
      const products1 = {
        id: "456",
        abbreviation: "456",
        case_no: "456",
        created_dt: "31/01/2018",
        last_updated: "11:43:45"
      };
      return {
        ...state,
        products1: state.products1.concat(products1)
      };
    }
    default:
      return state;
  }
}

Вы нажимаете попробовать в https://codesandbox.io/embed/74108xyln0

Answer 2

Попробуйте это ::

products1 = {
  id: "456",
  abbreviation: "456",
  case_no: "456",
  created_dt: "31/01/2018",
  last_updated: "11:43:45"
});

return {
  ...state,
  products1: [...state.products1, products1]
};

Обычно вы помещаете туда полезную нагрузку и отправляете через этот объект, когда отправляете действие.

Как это ::

return {
  ...state,
  products: [...state.products, action.payload]
};

Это предполагает, что products является массивом, и вы хотите .push() новый элемент в этом массиве.

Надеюсь, это поможет. :)

UPDATE ::
Вот полный пример редуктора, который я использую для продуктов, который добавляет новый при каждом его вызове.
Я отправляю объект в действии.

Разбавление:

import {
    PRODUCTS,
} from '../constants/ActionTypes';

let products = []
if (localStorage.getItem('products') != undefined) {
  products = JSON.parse(localStorage.getItem('products'))
}

const initialState = {
  products: products
};

export default function (state = initialState, action) {
  switch (action.type) {
    case PRODUCTS:
      localStorage.setItem('products', JSON.stringify([...state.items, action.payload]))
      return {
        ...state,
        products: [...state.items, action.payload]
      }
      break;
    default:
      // console.log('Products reducer called: default');
      // console.log(action.type);
      break;
  }
  return state
}   

Действие ::

export const addProduct = (obj) => {
  return {
    type: PRODUCTS,
    payload: obj
  };
};

Это вызов действия в файле index.js.

this.props.dispatch(addProduct(newItemObj));

Надеюсь, это имеет смысл.

Answer 3

Это проблемная область.

return {
    ...state,
    products1
  };

Измените эту функцию линии ReducersForSeach(state = initialState3, action) { на

function ReducersForSeach(state = initialState3.products1, action) {