I'm creating form in React Native and Redux. I added TextInput
and want to change the state of this field in Reducer. I have a trouble, because I don't know how to add (change) => this.setState({change})
function to my Redux architecture. I use combine reducers and have no idea how to bind that value.
Saying in short, I need to gain default behaviour of the TextInput
on change function but I have to use Redux to do it.
Form.js
const mapDispatchToProps = dispatch => {
return {
changeNameInput: () => dispatch({type: 'CHANGE_NAME_INPUT'})
};
};
const mapStateToProps = state => {
return {
change: state.changeNameInput.change
};
};
class Form extends React.Component {
render() {
return (
<View>
<FormLabel>Name</FormLabel>
<TextInput
onChangeText={this.props.changeNameInput}
value={this.props.change}
/>
</View>
);
}
}
Reducer.js
const initialState = {
change: 'Your name'
};
const changeinputReducer = (state = initialState, action) => {
switch (action.type) {
case 'CHANGE_NAME_INPUT':
//Problem
return {...state, change: '????' };
default:
return state;
}
};
export default changeinputReducer;
For passing value from TextInput to reducer, you need to change in dispatch function:
const mapDispatchToProps = dispatch => {
return {
changeNameInput: (text) => dispatch({type: 'CHANGE_NAME_INPUT', text})
};
};
and in your reducer change it to
const changeinputReducer = (state = initialState, action) => {
switch (action.type) {
case 'CHANGE_NAME_INPUT':
//Solution
return {...state, change: action.text };
default:
return state;
}
};
Hope it worked..
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With