What's the correct way to update <input/> default value?

[DogLooksGood]

I have a input tag:
<input type='text' />
when component did mount, I send ajax request and get a value.
Then I want to set this value as the input's defaultValue property.
Without redux, I might use local state, set this value to input's 'value' property and add an onChange function.
What's the correct way to do this in redux?

[morinted]

Your input will have local state, but you can connect it to redux on entry (component did mount, in your case) and on submit (or on change if you must act on the data immediately).

[DogLooksGood]

Thanks for help.
Well, connecting a lot of input to redux means I have to maintain their state. It's really complex. All I want is just setting the input's value, then make it free to be changed by user.

[timdorr]

You may want to use redux-form for this to make it more repeatable. You shouldn't have to set up actions for each input, just the whole form and its state.

Remember, the goal here is predictability and reliability. It may involve more steps to get the job done, but you'll end up with less gotchas and unexpected behavior. And on top of that, you can layer developer ergonomic tools like redux-devtools and webpack to enable hot reloading and time travel.

[mikebarnhardt]

Sounds like you are wanting to use uncontrolled components. Check out the React Docs if you are unsure.

With uncontrolled components you can just use defaultValue={state.value} and a user can then change the value without having to set up state changes.

Although many recommend against uncontrolled components and using refs for reasons mentioned above by @timdorr .

[gaearon]

Then I want to set this value as the input's defaultValue property.

That's not how defaultValue works. If you use defaultValue, that means “I only want to set it programmatically once, and then let user do whatever. If I ever want to update it again, I'll have to do it with DOM node tweaking.” This is called an uncontrolled input. It's good for simple forms that don't affect the rest of your app.

If you want to set values programmatically later in React's declarative manner, you'll have to make it a controlled input. In this case you'll have to provide always-up-to-date value as well as onChange that does something meaningful to change that value. Whether it calls setState or dispatches a Redux action is up to you. Redux Form is a nice project for making controlled forms easy with React and Redux, you might want to check it out.