I have a very simple submit form that I'm using React-hook-form to implement and I'm running into this strange issue where the global state isn't updated when I submit the first time, but it works the second time. Here's my code:
export default function Enter() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const { state, dispatch } = useContext(Store)
const onSubmit = (data) => {
console.log('sending user: ', data.username)
dispatch({
type: 'SET_PLAYER',
payload: data.username
})
console.log('UPDATED CLIENT STATE: ', state)
}
return (
<>
<form onSubmit={handleSubmit(onSubmit)}>
<p>Enter your name to join lobby</p>
<input {...register("username", { required: true })} />
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
</>
);
}
Here's a picture of how state appears to be lagging behind, essentially:
Dominik's comment was spot-on. Even though updates to state are synchronous, state updates in between function refreshes so you should use data within the function and if you need to do something after that updates, then use useEffect and wait for the state change.
I posted an answer below, but if someone can explain why this is necessary you'll get the bounty, I went through a redux tutorial and feel like I didn't learn about mapDispatchToProps, only mapStateToProps. If you can explain at a deeper level what exactly mapStateToProps and mapDispatchToProps are doing and how they are different I'll give you the bounty.
Minimum Reproducible Example
I have a mapStateToProps function that looks like
const mapStateToProps = state => {
return {
firstName: state.firstName,
middleName: state.middleName,
lastName: state.lastName,
}
}
const ReduxTabForm = connect(mapStateToProps)(MyTab)
In my MyTab component I have a button that is supposed to be inactive if these 2 field do not have anything entered in, but the state of whether or not the button is disabled does not change
function App() {
const {firstName, lastName} = store.getState().formData
const isDisabled = () => {
const {firstName, lastName} = store.getState().form
const requiredFields = [firstName, lastName]
alert(requiredFields)
for(let i = 0; i < requiredFields.length; i=i+1){
if (!requiredFields[i]){
return true
}
}
return false
}
return (
<div className="App">
<div className='bg-light rounded'>
<div className='px-sm-5 pt-0 px-4 flexCenterCol mx-5'>
<div>
<input
type='text'
className="form-control"
value={store.getState().formData['firstName']}
placeholder="First Name"
onChange={(e) => {
store.dispatch(setFormData({'firstName': e.target.value}))
}}
></input>
<input
type='text'
className="form-control"
value={store.getState().formData['lastName']}
placeholder="Last Name"
onChange={(e) => {
store.dispatch(setFormData({'lastName': e.target.value}))
}}
></input>
</div>
<button
type="submit"
disabled={isDisabled()}
>
Button
</button>
</div>
</div>
</div>
)
}
That alert statement executes on page refresh, but does not execute any time after that when I enter data in. I have checked that the redux state updating and it is. The button will not update though, and the isDisabled function will not run more than once
I looked at your reducer code and it looks like this:
...
const reducer = combineReducers({
formData: formReducer,
})
export default reducer
Which means your redux state structure is like this:
state = {
formData: {
firstName: <value>,
middleName: <value>,
lastName: <value>,
}
}
Solution
So, to make your component re-render when the redux state is changed, you need to subscribe to the correct state variables in your mapStateToProps function. Change it to this and will work:
const mapStateToProps = state => {
return {
firstName: state.formData.firstName, // Note that I added "formData"
middleName: state.formData.middleName,
lastName: state.formData.lastName
}
}
Couple of side notes:
It's a better to use the props instead of directly accessing the redux store.
For debugging, console.log is preferred over alert. React DevTools and Redux DevTools are even better.
I don`t know if this will solve your problems, but maybe it is one of the things below:
1 - As Mohammad Faisal said the correct form of calling props should be
const { firstName, lastName } = props;
2 - Instead of reduxTabForm, maybe you could use this instead:
export default connect(mapStateToProps)(MyTab);
3 - And finally, maybe it is an error in the "isDisabled":
for(let i = 0; i < requiredFields.length; i=i+1){
if (!requiredFields){
return false
}
}
If you look carefully, you can see that you are not checking if there is an error inside requeiredFields, your are looking if that doesnt exist if (!requiredFields), maybe changing the condition to if(!requiredFields[i]) so it check each variable and not if the array doesn`t exists.
Edit: the return condition is correct? Returning False when something doesn`t exists?
const ReduxTabForm = connect(mapStateToProps,null)(MyTab)
Try this code snippet, as you are not passing dispatch function to your component. It is better to pass null value.
mapdispatchtoProps is the same basic theory of mapStateToProps.You are storing the function inside the store(which usually in actions) and when rendering the component you attach those function in store to your props. After rendering the component you will be able to run the functions which are in store.
your state values are passed to your component as props. so if you want to access them inside component you should do something like this
const {firstName, lastName} = props
What you could do is something like:
<button
type="submit"
disabled={!fistname && !lastname}
/>
this way if any of your fields be falsy, button is disabled. (empty string is falsy)
The React redux documentation also explains mapDispatchToProps
If you call your action called setFormData from your redux/actions.js then you will be mapping the action setFormData (which is an object) to your component. The action setFromData replace mapDispatchToProps. This is what the documentation says about mapping actions to your components
If it’s an object full of action creators, each action creator will be
turned into a prop function that automatically dispatches its action
when called.
To fix your problem, change your connect function call to this.
const ReduxApp = connect(
setFormData,
mapStateToProps
)(App)
Your issues is with this code isDisabled()
const isDisabled = () => {
const {firstName, lastName} = store.getState().form
const requiredFields = [firstName, lastName]
alert(requiredFields)
for(let i = 0; i < requiredFields.length; i=i+1){
if (!requiredFields){
return false
}
}
return true
}
You are trying to test in loop !requiredFields, an array you created which always return false, even if it doesn't have values. It's a reference type. What you can do now is
const isDisabled = () => {
const {firstName, lastName} = store.getState().form
const requiredFields = [firstName, lastName]
alert(requiredFields)
for(let i = 0; i < requiredFields.length; i=i+1){
if (!requiredFields[i]){
return false
}
}
return true
}
Your loop will check firstNAme and LastName values if they are undefined or not and test should respond with this.
The problem is in the mapStateToProps method. Your code is setting firstNAme and lastName as formData within state object and you are trying to access it from state object directly.
This codesandbox has your project updated with the fix. I didn't fix any other thing in your code so everything is as it is only mapStateToProps should be:
const mapStateToProps = (state) => {
return {
firstName: state.formData["firstName"],
middleName: state.middleName,
lastName: state.formData["lastName"]
};
};
and this will fix your issue. mapStateToPropsis kind of a projection function which will project entire store to some object which will only have properties based on requirements of your component.
Redux re-render components only when store state changes. Check if you are only updating store's state property not whole state because redux compare state by comparing their references, so if you are doing something like this inside your reducer:
State.firstName = action.payload.firstName;
return State;
Then change this to this:
return {...State, firstName: action.payload.firstName}
Note: If you unable to grasp that then kindly provide your reducer code too so that I can see how you are updating your store state.
Looking at your MRE on GitHub, the first thing I want to say is that your button will only have one state and it is the one that the isDisabled() method returns when you refresh the page. This is because the App component it's not getting refresh every time you write on the input fields, so you will never be able to make it change.
you need to subscribe to the correct state variables in your mapStateToProps function. Like this:
const mapStateToProps = state => {
return {
firstName: state.formData.firstName,
middleName: state.formData.middleName,
lastName: state.formData.lastName
}
}
So now that you have this right, you have to introduce this props into your component, like this:
function App({firstName, lastName}) { ...
Another thing to add, is that your are not initializing the states when you create your reducer in reducer.js. If you don't do this, your initial states for firstName and lastName will be null. Here is how you should do it:
import {combineReducers} from 'redux'
import {SET_FORM_DATA} from './actions'
const initialState = {
firstName: "",
lastName: ""
}
const formReducer = (state = initialState, action) => {
if (action.type === SET_FORM_DATA){
return {
...state,
...action.payload
}
}else{
return state
}
}
const reducer = combineReducers({
formData: formReducer,
})
export default reducer
Finally you have to update App:
function App({firstName, lastName}) {
return (
<div className="App">
<div className='bg-light rounded'>
<div className='px-sm-5 pt-0 px-4 flexCenterCol mx-5'>
<div>
<input
type='text'
className="form-control"
placeholder="First Name"
onChange={(e) => {
store.dispatch(setFormData({'firstName': e.target.value}));
console.log(firstName === "h");
}}
></input>
<input
type='text'
className="form-control"
placeholder="Last Name"
onChange={(e) => {
store.dispatch(setFormData({'lastName': e.target.value}))
alert(JSON.stringify(store.getState()))
}}
></input>
</div>
<button
type="submit"
disabled={firstName == "" || lastName == ""}
>
Button
</button>
</div>
</div>
</div>
);
}
So in this way you will be able to update the states from your store and have the dynamic behavior that you were looking for.
In isDisabled function you read data from form: const {firstName, lastName} = store.getState().form but I guess they are saved to formData.
Changing const {firstName, lastName} = store.getState().form to const {firstName, lastName} = store.getState().formData should help.
I'm trying to update my store's "searchField" value (it starts as a blank string) when a user inputs a value into the text box of the free-response component. When I type in the field, the "searchField" property becomes undefined and I fear it's a fundamental error I can't see (I'm still quite new to Redux.) I've included my reducer, component and relevant action code below. Any help is greatly appreciated!
free-response.component.jsx:
export const FreeResponse = ({searchField,changeSearchField,i}) =>{
let questionURL="/images/question";
return(
<div className="main">
<img src={`${questionURL}${i}.png`}/>
<form >
<input type="text" onChange={changeSearchField} value={changeSearchField} alt="text field"/>
</form>
</div>
)}
const mapStateToProps=state=>({
searchField: state.question.searchField,
i:state.question.i
})
const mapDispatchToProps=dispatch=>({
changeSearchField: (e)=>dispatch(changeSearchField(e.target.value))
})
export default connect(mapStateToProps,mapDispatchToProps)(FreeResponse);
question.reducer.js:
return{
...state,
searchField:changeSearchField(e)
};
question.utils.js (action creator):
export const changeSearchField=(e)=> e;
question.actions.js:
export const changeSearchField=()=>({
type:QuestionActionTypes.CHANGE_SEARCHFIELD,
})
It seems like you did not define the payload for your changeSearchField action. This is to ensure that the values from your form input will be passed on by the action creator.
This is one way you can do it:
export const changeSearchField = (searchField) => ({
type: QuestionActionTypes.CHANGE_SEARCHFIELD,
payload: searchField
});
And on your reducer, you just need to update the store with the values from the payload (the below may differ depending on the actual structure of your store):
return {
...state,
searchField: action.payload.searchField,
};
I am trying to submit an address form using redux form. It seems like a good way of handling the input data and validation.
I am just wondering if I can make the syntax a bit cleaner, because, frankly, trying to use connect at the same time makes the code a mess at the bottom. In my case, I want to send the address data to a Node endpoint, so I need to call an action generator which sends an AJAX request. I'm wondering if I'm missing something obvious to make dispatching an action inside the submit function easier.
class AddressForm extends Component {
renderContent() {
return formFields.map(({ name, label }) => (
<Field
key={name}
name={name}
label={label}
type='text'
component={FormField}
/>
)
);
};
render() {
return (
<form onSubmit={this.props.handleSubmit}>
{this.renderContent()}
<button type="submit">Next</button>
</form>
);
};
};
const validate = (values) => {
const errors = {};
errors.email = validateEmail(values.email || '');
formFields.forEach(({ name }) => {
if (!values[name]) errors[name] = 'Please provide a value';
});
return errors;
};
const myReduxForm = reduxForm({
validate,
form: 'addressForm'
})(AddressForm);
const mapDispatchToProps = (dispatch, ownProps) => ({
onSubmit: data => dispatch(submitForm(data, ownProps.history))
});
export default connect(null, mapDispatchToProps)
(withRouter(myReduxForm));
Sure, instead of connecting, you can use the handleSubmit prop inside your component. It allows you to supply a callback with three arguments: values, dispatch and props. So you can do something like:
<form onSubmit={this.handleSubmit((values,dispatch,{submitForm})=> dispatch(submitForm(values)))} />
When a user clicks a square it becomes currentHtmlObject. I want people to be able to update it's properties in the right sidebar.
I have no idea how to take a single input field and update an object's property that I'm holding in a react-redux state and update the main viewing area DrawingCanvas.
I got kinda close where the info I was entering into the form was activating my reducers and actions. But I couldn't figure out how to distinguish between left and top.
// React
import React from 'react'
export class RightSidebar extends React.Component {
constructor(props) {
super(props)
}
handleChange(evt) {
console.log(evt)
this.props.onUpdateCurrentHtmlObject(evt.target.value)
}
render() {
const { currentHtmlObject } = this.props
return (
<form>
{this.props.currentHtmlObject.id}
<div className="right-sidebar">
<div className="form-group">
<label>Position X</label>
<input
type="number"
name="left"
className="form-control"
value={this.props.currentHtmlObject.styles ? this.props.currentHtmlObject.styles.left : ''}
onChange={this.handleChange.bind(this)} />
</div>
<div className="form-group">
<label>Position Y</label>
<input
type="number"
className="form-control"
value={this.props.currentHtmlObject.styles ? this.props.currentHtmlObject.styles.top : ''}
onChange={this.handleChange.bind(this)} />
</div>
</div>
</form>
)
}
}
RightSidebar.defaultProps = {
currentHtmlObject: {
styles: {
left: null,
top: null
}
}
}
There is no need to distinguish between left and top, let's assume you have an action named update and all it does is to update a selected object's property. Here is what the action method may look like:
updateSelectedObj(id, payload){
return {
type: UPDATE_SELECTED_OBJ,
id: id,
payload: payload
}
}
Here is what your event handler might look like in class RightSidebar:
handleChange(evt) {
// since your top and left input fields have a corresponding name property, evt.target.name will return either `left` or `top`
store.dispatch(updateSelectedObj({styles:{evt.target.name:evt.target.value}})
}
Here is your reducer:
[UPDATE_SELECTED_OBJ]: (state, action) => {
// I assume you have a list of objects in the canvas but only one can
// be selected at a time. and I assume the name of the list is objList
let selectedObj = state.objList.filter(obj => obj.id == action.id)[0]
selectedObj = Object.assign({}, selectedObj, action.payload)
return { objList: state.objList.map(obj => obj.id === action.id? Object.assign({}, obj, selectedObj : obj) }
}
I might suggest simplifying the component itself. Sorry for being brief :). I can update w/ more context when I get some time.
This is a stripped down example, but basically thinking of each "number input" as only needing a value and onChange (emits value, not an event).
You would make use of react-redux's connect so that updateObject is a callback accepting the "patch data" to be merged into the currentObject's state.
/**
* #param currentObject
* #param updateObject An already bound action creator that accepts payload to "update object"
*/
function SideBar({currentObject, updateObject}) {
const {styles} = currentObject;
return (
<div>
<NumberInput
value={styles.left}
onChange={left => updateObject({left})}
/>
<NumberInput
value={styles.top}
onChange={top => updateObject({top})}
/>
</div>
)
}
The connect statement might look something like
const SideBarContainer = connect(
(state, {objectId}) => ({
currentObject: _.find(state.objects, {id}),
}),
(dispatch, {objectId}) => ({
updateObject: data => dispatch(
actions.updateObject(objectId, data)
)
})
)(SideBar);
And the actual usage, maybe something like
<SidebarContainer objectId={currentObjectId} />