State is just a fancy way of saying where your application is in terms of data, i.e the state of your data as actions and events happen in your web application. As we discussed in a previous issue, depending on this state the UI gets updated if it has changed.
Now, there are multiple ways you can manage state in your application, and how you should do it depends on the specific application and its complexities. Here I have outlined two ways you can do it -
With state stored in Components.
Storing state using Redux.
Using Components
Consider this example which was given in the previous issue about an element with dynamic text.
class ElementWithDynamicText extends React.Component {
constructor() {
super();
this.state = {text: "Text"};
}
render() {
return <h2>{this.state.text}</h2>;
}
}
Here, as you can see we are storing the text to be displayed in the state object. It simply is a plain JS Object so you can store anything in the state that you can store in a JS Object. Also, this state is encapsulated within this component so it can only affect the rendering of this component. (and it's children if the state is passed as props to its child components)
A call to setState
with the new state object anywhere in this component changes the state of the component.
this.setState({text:"New text"})
Usually, a complex web application does not have a single component, it's made up of composing many small self-sufficient components working together in unison.
If the state of the whole application were to be stored this way, we'd have to pass the state around to a lot of components down the component chain making it a mess to maintain giving rise to the need for a state management library.
Note: If the application you are working on does not involve a lot of data to keep track of, not using Redux or a state management library is still the best way to go about it IMO.
Using Redux
You can replace Redux here with the state management library of your choice, but the idea I want to get across here is how to use a state management library like Redux to structure your application and how it's different from handling state yourselves.
Redux is a direct implementation of the flux architecture we discussed so it comes with an API that matches it that we can use to manage state.
With Redux, all our application state is stored in the Redux store that React components can subscribe to for UI updates. The difference here is that the state is maintained centrally with Redux and not with the individual component therefore the functions responsible for updating the state are also decoupled away into Reducers.
// appState schema used in Redux store.
const appState = {
text: "Text",
// Other pieces of data not used in our example component.
todos: [
{ id: 0, text: 'Learn React', completed: true },
{ id: 1, text: 'Learn Redux', completed: false, color: 'purple' },
{ id: 2, text: 'Build something fun!', completed: false, color: 'blue' }
],
}
The same component above now looks like the following, with it receiving the state as props from Redux whenever an update occurs.
import { connect } from 'react-redux';
class ElementWithDynamicText extends React.Component {
constructor() {
super();
}
render() {
return <h2>{this.props.text}</h2>;
}
}
const mapStateToProps = (state) => ({
text: state.text,
});
const ElementWithDynamicTextUsingRedux = connect(mapStateToProps)(ElementWithDynamicText)
export default ElementWithDynamicTextUsingRedux;
As you might notice, the advantage here is that any component which needs to update based on the text
field can subscribe to it without unnecessarily passing the text
field down as props down the component chain.
This makes the codebase much more manageable with the Redux Store being the single source of truth for state.
Thanks for reading!. If you liked what you read let me know! Better yet share it with a pal who would find this series useful.
Have a question? Let me know in the comments or simply reply to the email if you got this in your inbox. Next, we'll dive into more fun stuff that React offers!
Follow me on Twitter for anything related to tech, startups, and building products.