Как добавить входы динамически, используя Redux?

Question

Раньше я делал это с локальным состоянием, но теперь мне нужно передать его в Redux.Я не использую Redux Forms и не собираюсь.

Вот как я делал / делаю это с локальным состоянием, используя хук useState:

const DynamicInputExample = () => {

    const [addShareStructureInput, setAddShareStructureInput] = useState({
      inputs: ['input-0'],
    });

    const appendInput = () => {
      const newInput = `input-${addShareStructureInput.inputs.length}`;
      setAddShareStructureInput(prevState => ({ inputs: prevState.inputs.concat([newInput]) }));
    };


  return(
    <div id="dynamicInput">
      // HERE I MAP THE INPUTS
      {addShareStructureInput.inputs.map(input => (
        <FormField
          key={input}
          onChange={() => onChange()}
        />
      ))}
      <div>
        <Button
          type="button"
          // HERE I CALL THE FUNCTION TO ADD NEW INPUT
          onClick={() => appendInput()}
        >
          + Add More
        </Button>
      </div>
    </div>
  )
}

Но теперь янужно убрать этот хук в этом коде и сделать ту же логику в Redux.

Это то, что я сделал до сих пор: Действие:

export const shareStructureInputsAction = shareStructureInputs => ({
  type: ActionTypes.SHARE_STRUCTURE_INPUTS,
  payload: { shareStructureInputs },
});

Редуктор:

const initialState = {
  shareStructureInputs: ['input-0'],
}

const handlers = {
  [ActionTypes.SHARE_STRUCTURE_INPUTS](state, action) {
    return {
      ...state,
      // BELOW I NEED TO ADD THE LOGIC TO KEEP THE STATE OF THE INPUTS ADDED
      shareStructureInputs: {
        ...action.payload.shareStructureInputs,
      },
    };
  },
}

Итак, как же вместо этого смоделировать ту же логику / поведение с Redux?

Answer 1

Действие:

export const shareStructureInputsAction = shareStructureInputs => ({
  type: ActionTypes.SHARE_STRUCTURE_INPUTS,
  payload: shareStructureInputs
});

Редуктор:

const initialState = {
  shareStructureInputs: ['input-0'],
}

const handlers = {
  [ActionTypes.SHARE_STRUCTURE_INPUTS](state, action) {
    return {
      ...state,
      shareStructureInputs: action.payload
    };
  },
}

import { connect } from 'react-redux';
import { shareStructureInputsAction } from 'actions/shareStructureInputsAction';

const DynamicInputExample = (props) => {

  const { shareStructureInputs, setShareStructureInputs } = props;

  const appendInput = () => {
    const newInput = `input-${shareStructureInputs.length}`;
    setShareStructureInputs(shareStructureInputs.concat(newInput));
  };

  return(
    <div id="dynamicInput">
      // HERE I MAP THE INPUTS
      {shareStructureInputs.map(input => (
        <FormField
          key={input}
          onChange={() => onChange()}
        />
      ))}
      <div>
        <Button
          type="button"
          // HERE I CALL THE FUNCTION TO ADD NEW INPUT
          onClick={() => appendInput()}
        >
          + Add More
        </Button>
      </div>
    </div>
  )
}

const mapStateToProps((state) => ({
  shareStructureInputs: state[ActionTypes.SHARE_STRUCTURE_INPUTS].shareStructureInputs
}));

const mapDispatchToProps({
  setShareStructureInputs: shareStructureInputsAction
})

export default connect(mapStateToProps, mapDispatchToProps)(DynamicInputExample);

Answer 2

Это можно сделать, используя что-то вроде этого:

const initialState = {
  shareStructureInputs: ['input-0'],
}

const handlers = {
  [ActionTypes.SHARE_STRUCTURE_INPUTS](state, action) {
    return {
      ...state,
      shareStructureInputs: [...shareStructureInputs, action.payload.shareStructureInputs],
    };
  },
}