React Local State and Redux State (Without Hooks)

I was recently tasked with adding a feature to an existing original application. The application, however, largely uses a Redux store for state management. So, given the nature of the feature that was added, here's how I used local state in a Redux-managed application:

The project is a basic savings calculator that logs transactions (both deposits and withdraws) and tallies the total amount saved at all times. Each transaction is associated with a goal, or reason for allocating the funds. The app also contains a search page, among other attributes.

Through use of React Router, I have all of the transactions logged displayed under the "Transaction History" page, a.k.a. the route "/transactions" in the url. The task given to me was to add a button to this page that would sort the transactions by amount when clicked, and when clicked again, re-displays the transaction list as it originally appeared.

Like I mentioned, the app's state is being managed by a Redux store, with the exception of a controlled form for adding a transaction, which uses local state. I knew that adding this button should also be something that has its own local state because the list being displayed is directly dependent on whether or not the button has been clicked to sort. In other words, the local state being used only in the button is what determines the list being rendered in the browser. So, I added this short declaration of local state inside of a component that is also tied to state being managed by the Redux store:

state = {
      sorted: false
    }

With this, we have a baseline for the state to use in the context of this sort button.

Now of course it's important we actually have a button to work with, so I set the button up as follows (again, within the context of a larger component):

<button onClick={() => this.setState({sorted: !this.state.sorted})}>Click to Sort</button>

Here, I'm allowing the button to be toggled, by clicking, to change the value of "sorted" from state from "true" to "false" and display the data accordingly.

Further, I then implemented a ternary statement testing the condition of state in order to know what should be rendered. The ternary basically states that if the value of "sorted" from state is equal to "false," the data should display as it normally does. However, on the inverse, when the button is clicked, the local state is set opposite and the data is displayed, sorted by amount from least to greatest. Here is what the ternary looks like:

{this.state.sorted ? sortedTransactions.map(t => <TransactionCard key={t.id} {...t} /> )  : this.props.transactions.map(t => <TransactionCard key={t.id} {...t} /> )}

I am using the return value of sortedTransactions if the value of "sorted" is true, whereas otherwise I am pulling the transactions from the Redux store by way of both the connect() function and mapStateToProps and displaying them as they do by default. Here is what the sortedTransactions variable looks like, for reference:

const sortedTransactions = [...this.props.transactions].sort((a, b) => (a.amount - b.amount))

With these steps I was able to successfully implement the sort button and complete the task, which strengthened my confidence in mixing local state with Redux state in a React application. It also never hurts to brush up on using the sort() function, in fact I had to read up on the documentation for the function while completing this feature to figure out how to sort the data in the way I was being asked, which was from lowest amount to greatest.

It was also with this project in general that I realized how local and Redux state can be mixed in an application. What I've deduced, is that deciding whether or not to use Redux versus local state can sometimes come down to just preference or importance/weight of the feature, among plenty of other things.

Here are the links to both the front end repository as well as the Rails back end repository:
Front | Back

Comments

[Mark Erikson]

FWIW, we have always encouraged using both Redux state and local component state, at the same time, as appropriate:

• redux.js.org/faq/organizing-state#...
• redux.js.org/style-guide/style-gui...
• redux.js.org/tutorials/essentials/...

[Catherine Hodgkinson]

I understand, but basically what I was saying is that I had to really build my own project from scratch for that to make sense. Thank you for checking out my post!