ReactJS - Global state outside of components

Question

I've been reading and watching videos on Redux and seeing a lot of debate about managing state in components or with Redux. What I'm not seeing is anything about managing state completely outside of components with standard global variables.

For example, I could set a global state variable like this:

let state = {
   player:  {
       username: "BillyBob",
       score: 100
   }
}

Then in a React component, I could have something like this:

incrementScore() {
    state.player.score += 1
    props.update()
}

Then in App.js, I could have this:

update() {
    this.forceUpdate()
}

I realize that I'd still have to pass the update function down through the tree, but I'd at least be able to set functions at the component level and not have to worry about passing multiple pieces of state and functions to child components.

I'm new to React, but the only downside I can think of is not being able to require propTypes. Is there anything else I'm missing?

EDIT: Per request that I clarify the question, are there any major downsides to the implementation above that I should be considering that would affect even a relatively simple app?

Answer 1

If you look at the implementation of redux or some other state management library out there (for example mobx or mobx-state-tree ), basically all of them maintain the state outside of the component as a standalone object.

However, to detect changes and trigger re-render efficiently, they implement a HOC, it's connect in redux and inject in mobx , what the HOC (higher order component) does is to wrap your component inside another component that have access to the global state , and pass the part of the state require by your component via its props. This way, the component only re-render when the data required by it changes.

Compared with these popular library approach, there are couple problems with your proposed solution.

The first is using forceUpdate , basically, the last thing you might want to do is to call forceUpdate on the root node of your app, think about scenario when someone type in an input and the whole app re-render every single keystroke.

The second will be passing an update function down to multiple level of children, it will be fine if you have only 1 or 2 nested component, but will be a big problem one your app grows. As your app grows and your state become more complex, it might not be the best idea to have a single update function to control the whole state object.

Answer 2

React exists to solve the problem of creating a user interface that is composed of several indepentent pieces that can be developed in parallel and can seamlessly interact with each other.

If you are going to use global namespace to define your state then you are going to bypass most of the key features of React such as:
1. Lifecycle methods
2. Virtual DOM
3. Controlled Components
4. Rendering Optimizations

In a nutshell, you are going to end up with all the overhead costs of running React while missing out on its benefits.

The 'catch' in learning a new framework or paradigm is to understand how to define the problem in such a way that it leads to path of least resistance. This can be achieved by introducing a constraint and then solving the problem within that constraint.

By favoring vanilla JavaScript for state management, you are not giving React and Redux a fair chance.

Answer 3

I've created a library exactly for this use case :)

Simple 💪 fast ⚡️ and small 🎈 (500 bytes) global state management for React which can be used outside of a React component too!

https://github.com/web-ridge/react-ridge-state

Answer 4

坚持使用 redux，不要让事情复杂化 :)