Reacting
Reacting

Reputation: 6123

How to add inputs dynamically using Redux?

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?

Upvotes: 0

Views: 44

Answers (2)

Drazen Bjelovuk
Drazen Bjelovuk

Reputation: 5472

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

Upvotes: 1

V&#237;tor Fran&#231;a
V&#237;tor Fran&#231;a

Reputation: 767

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

Upvotes: 1

Related Questions