How to add inputs dynamically using Redux?

Question

Before I was doing this with local state but now I need to pass it to Redux. I am not using Redux Forms and I am not going to.

This is how I was/am doing it with local state using the useState hook:

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

But now I need to remove that hook on that code and make the same logic on Redux.

This is what I've done so far: Action:

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

Reducer:

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

So, how can I simulate the same logic/behavior with Redux instead?

Vítor França · Accepted Answer · 2019-04-23 21:33:29Z

1

It's possible to do it, using something like this:

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

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

answered Apr 23, 2019 at 21:33

Vítor França

7579 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reacting Over a year ago

Can you tell me how do I call that on the component? Based on the first chunk of code I posted.

Reacting Over a year ago

Like how do i call the action handler

Drazen Bjelovuk · Accepted Answer · 2019-04-23 22:22:09Z

Action:

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

Reducer:

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

Collectives™ on Stack Overflow

How to add inputs dynamically using Redux?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related