Reputation: 6123
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
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
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