React/Redux Sort Function Not Updating State - reactjs

Question

I have a simple React/Redux app that displays a list of cars based on my Rails API.
I'm trying to add a sort feature that alphabetizes the cars by their name.
While my variable orgArray is in fact alphabetized when I console.log it, my Redux dev tool says states are equal after clicking the sort button - therefore my UI isn't updated.
Here's my code:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import CarCard from '../components/CarCard';
import CarForm from './CarForm';
import './Cars.css';
import { getCars } from '../actions/cars';
import { sortCar } from '../actions/cars';
Component.defaultProps = {
cars: { cars: [] }
}
class Cars extends Component {
constructor(props) {
super(props)
this.state = {
cars: [],
sortedCars: []
};
}
sortAlphabetically = () => {
console.log("sort button clicked")
const newArray = [].concat(this.props.cars.cars)
const orgArray = newArray.sort(function (a,b) {
var nameA = a.name.toUpperCase();
var nameB = b.name.toUpperCase();
if (nameA < nameB) {
return -1;
} else if (nameA > nameB) {
return 1;
}
return 0;
}, () => this.setState({ cars: orgArray }))
console.log(orgArray)
this.props.sortCar(orgArray);
}
componentDidMount() {
this.props.getCars()
this.setState({cars: this.props.cars})
}
render() {
return (
<div className="CarsContainer">
<h3>Cars Container</h3>
<button onClick={this.sortAlphabetically}>Sort</button>
{this.props.cars.cars && this.props.cars.cars.map(car => <CarCard key={car.id} car={car} />)}
{/* {this.state.cars.cars && this.state.cars.cars.map(car => <CarCard key={car.id} car={car} />)} */}
<CarForm />
</div>
);
}
}
const mapStateToProps = (state) => {
return ({
cars: state.cars
})
}
const mapDispatchToProps = (dispatch) => {
return {
sortCar: (cars) => dispatch(sortCar(cars)),
getCars: (cars) => dispatch(getCars(cars))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Cars);
I would have guessed that mapStateToProps or adding the sortedCars: [] in my initial setState would have worked.
Essentially, my props are getting updated, but I need my state to be updated as well - though I'm not sure what I'm missing.
UPDATED:
Here's my action creator and Async action if it helps:
const sortCars = cars => {
return {
type: 'SORT_CARS',
cars
}
}
// Async Actions
export const sortCar = (cars) => {
console.log(cars, 'cars object');
return dispatch => {
dispatch(sortCars(cars))
}
}
UPDATE:
Here's the Reducer as well:
export default (state = {cars: []}, action) => {
switch(action.type) {
case 'GET_CARS_SUCCESS':
return Object.assign({}, state, {cars: action.payload})
case 'CREATE_CAR_SUCCESS':
return Object.assign({}, state, {cars: action.payload})
case 'REMOVE_CAR;':
return state.filter(car => car.id !== action.id)
case 'SORT_CARS;':
return Object.assign({}, state, { cars: action.payload})
default:
return state;
}
}

Answer 1

First, I think you don't actually need any state here, you can just update the store and show cars from props.
Also, I think the problem here is that you pass orgArray to this.props.sortCar(orgArray) which is an array instead of object with "cars" key and values inside.
Apart from that setState call is being declared as anonymous function instead of being actually executed after the sorting.
Make sure to indent your code.

Answer 2

Sort only have one argument (the sort function). And in your sortAlphabetically method setState (placed as a second argument of sort) is not being called.
The method should be something like that (I didn't tested it)
sortAlphabetically = () => {
console.log("sort button clicked")
const newArray = this.props.cars.cars.slice();
const orgArray = newArray.sort(function (a, b) {
var nameA = a.name.toUpperCase();
var nameB = b.name.toUpperCase();
if (nameA < nameB) {
return -1;
} else if (nameA > nameB) {
return 1;
}
return 0;
});
this.setState({ cars: orgArray }, () => {
console.log(orgArray);
this.props.sortCar(orgArray);
});
}

Answer 3

Got a solution that just uses the local state instead of the Redux store (not ideal, but fulfills this feature).
Adding async to my componentDidMount along with the await waits to update the data until the local state has changed, which then reflects in my UI.
Thanks everyone for your help.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import CarCard from '../components/CarCard';
import CarForm from './CarForm';
import './Cars.css';
import { getCars } from '../actions/cars';
import { sortCar } from '../actions/cars';
Component.defaultProps = {
cars: { cars: [] }
}
class Cars extends Component {
constructor(props) {
super(props)
this.state = {
cars: [],
sortedCars: []
};
}
sortAlphabetically = () => {
console.log("sort button clicked")
const newArray = [].concat(this.props.cars.cars)
const orgArray = newArray.sort(function (a,b) {
var nameA = a.name.toUpperCase();
var nameB = b.name.toUpperCase();
if (nameA < nameB) {
return -1;
} else if (nameA > nameB) {
return 1;
}
return 0;
})
console.log(orgArray)
this.props.sortCar(orgArray);
this.setState({ cars: {cars: orgArray} })
}
async componentDidMount() {
await this.props.getCars()
this.setState({cars: this.props.cars})
}
render() {
return (
<div className="CarsContainer">
<h3>Cars Container</h3>
<button onClick={this.sortAlphabetically}>Sort</button>
{this.state.cars.cars && this.state.cars.cars.map(car => <CarCard key={car.id} car={car} />)}
<CarForm />
</div>
);
}
}
const mapStateToProps = (state) => {
return ({
cars: state.cars
})
}
const mapDispatchToProps = (dispatch) => {
return {
sortCar: (cars) => dispatch(sortCar(cars)),
getCars: (cars) => dispatch(getCars(cars))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Cars);

Answer 4

You should not use setState(). setState() does not immediately mutate this.state but creates a pending state transition. this.state after calling this method can potentially return the existing value. so here is how to handle sorting.
NOTE that by default, the sort() method sorts the values as strings in alphabetical and ascending order. so u dont need to define any compare function.
1-u can define another action and have reducer handle the sorting. the thing is here u have to make sure u do not mutate the state so use slice()
case 'SORT_CARS':
return state.slice().sort()
2- u can define a function and pass the state as arguments and return the sorted state.
const mapStateToProps = (state) => {
return ({
cars: state.cars.sort()
})
}