Should I use state, or should I always store it in the redux store?

Question

JavaScript

In your apps with react + redux, do you use state? Some people tell me that all data should be stored in the redux store and the state should not be used at all.
I think that all the data in the store is the same as using global variables.
Interesting opinion of other developers. What approaches and architecture do you use with react?

Answer 1

Once you start doing server rendering, you will understand why you need redux

Answer 2

I didn’t code a lot in redux, but I saw in various screencasts that the state inside the components is used purely to control the UI inside a particular component, for example, hide / show flags for any blocks, or input field values ​​​​that are updated on the change event and used in the component somewhere else without affecting the app's state in the store

Answer 3

State can and should be used. The creator of the Redux library has said this more than once.
I agree with Pavel Shvedov about in what cases. There is absolutely no need to bring the same onChange in the input field to the redux store and dispatch the changes for each sneeze, if you, for example, are doing field validation. Let you have a form, it has a submit button, for it, for example, the simplest rule is: all three form fields must not be empty. Should it be put in the store? What for? Use state, see: if the fields are not empty, remove the disabled attribute from the submit button. See === the react itself looks, depending on the variable in the state, since the component is re-rendered on state changes.
Example:

...
constructor(props) {
    super(props)
    this.state = {
      email: '',
      password: '',
    }
    this.onSubmit = this.onSubmit.bind(this)
    this.onInputChange = this.onInputChange.bind(this)
  }
  onSubmit(e) {
    e.preventDefault()
    const { email, password } = this.state
    this.props.onSubmit(email, password)
  }
  onInputChange(e) {
    this.setState({ [e.target.id]: e.target.value })
  }
  validate() {
    if (this.state.email && this.state.password) {
      return true
    }
  }
...

further in the render method of the component:

render() {
    const { email, password } = this.state
    return (
      <div className='row'>
        <div className='centered w300'>
          <form onSubmit={this.onSubmit}>
            ...
            <button type='submit' className='btn btn-success' disabled={!this.validate()}>
              Submit
            </button>
          </form>
        </div>
      </div>
    )
  }

If you don't need more, then why use store ? In case for some more complex validation, you can use onBlur events and already dispatch them (suddenly you check the entered nickname for "busy / not busy").

Answer 4

If we simplify to disgrace, the logic of using store / state is as follows:

• Store describes the global state of the application
  
• State describes the local state of the components
  

Answer 5

off: There is a subjective feeling that Redux was made by people who were not aware of the existence of state in components.
In general, somewhere you can find that reducers advise using state where some part of the component does not care about the state of the application and it lives its own life.
It’s hard to give a worthy example at a glance, but what came to mind: “a step-by-step form filling component, where step-by-step for data is not critical, and the component is just a UI / UIX gadget.”

Answer 6

You may not need redux , article by Dan Abramov (creator of redux).