Мой компонент не обновляется, когда я использую Redux в качестве менеджера состояний?

Question

Это просто пример кода, который я пытаюсь контролировать своими контролируемыми входами с помощью Redux, я добавляю Redux в свой проект React и добавляю редуктор и действие, но все работает хорошо, кроме обновления моего компонента в одном из моих действий. следующий код - мой редуктор:

import actionTypes from "./actions";
const uniqid = require("uniqid");
const firstID = uniqid();
const initialState = {
  cons: [
    {
      value: "",
      id: firstID,
      added: false
    }
  ],
  pros: [
    {
      value: "",
      id: firstID,
      added: false
    }
  ],
  num: 0
};
const reducer = (state = initialState, action) => {
  const newState = { ...state };
  switch (action.type) {
    case actionTypes.HANDLEINPUTCHANGE:
      // const newState = state;
      const changingItem = newState[action.case].find(item => {
        return item.id === action.id;
      });
      const changingItemIndex = newState[action.case].findIndex(item => {
        return item.id === action.id;
      });
      changingItem.value = action.event;
      if (
        changingItemIndex === newState[action.case].length - 1 &&
        !changingItem.added
      ) {
        alert(123);
        const newItem = {
          id: uniqid(),
          value: "",
          added: false
        };
        newState[action.case].push(newItem);
        changingItem.added = true;
        console.log(newState);
      }
      newState[action.case][changingItemIndex] = changingItem;
      return newState;
    case actionTypes.CLICK:
      newState.num += 1;
      return {
        ...newState
      };
    default:
      return state;
  }
};
export default reducer;

, а следующий код - мой компонент, к сожалению, тип действия HANDLEINPUTCHANGE не обновил мой компонент:

import React, { Component } from "react";
import FormElement from "../../base/components/formElement/FormElement";
import actionTypes from "../../base/store/actions";
import { connect } from "react-redux";
import "./style.scss";
class FormGenerator extends Component {
  render() {
    console.log(this.props);
    return (
      <ul className="row formGeneratorContainer fdiColumn">
        <li onClick={this.props.click}>{this.props.num}</li>
        {this.props[this.props.case].map((item, index) => {
          return (
            <li className="row formGeneratorItem" key={index}>
              <div className="bullet d_flex jcCenter aiCenter">1</div>
              {/* <FormElement onChange={(e,index,type,)}/> */}
              <input
                name={item.id}
                type="text"
                onChange={event =>
                  this.props.onFieldValueChange(
                    event.target.value,
                    index,
                    this.props.case,
                    item.id
                  )
                }
              />
            </li>
          );
        })}
      </ul>
    );
  }
}

const mapStateToProps = state => {
  return {
    cons: state.cons,
    pros: state.pros,
    num: state.num
  };
};
const mapDispachToProps = dispatch => {
  return {
    onFieldValueChange: (event, index, c, id) =>
      dispatch({
        event: event,
        index: index,
        case: c,
        id: id,
        type: actionTypes.HANDLEINPUTCHANGE
      }),
    click: () => dispatch({ type: actionTypes.CLICK })
  };
};
export default connect(
  mapStateToProps,
  mapDispachToProps
)(FormGenerator);

Answer 1

Вам необходимо установить value вашего контролируемого компонента:

<input
    name={item.id}
    type="text"
    value={item.value}
    onChange={event =>
        this.props.onFieldValueChange(
            event.target.value,
            index,
            this.props.case,
            item.id
        )
    }
/>

Другие проблемы в вашем редукторе, вы изменяете состояние избыточности следующими строками:

newState[action.case].push(newItem);
// ...
newState[action.case][changingItemIndex] = changingItem;

Посмотрите на эти разделы в документации по редуксу:

• Вставка и удаление элементов в массивах
• Обновление элемента в массиве