How i can dispatch one list in redux? - reactjs

Question

I have this class that shows a list of cars:
render() {
return (
<div>
{this.props.cars.map((car) => <Car key={car.Id} car={car} />)}
</div>
);
}
I'm making a http request to get the cars in my api:
componentDidMount() {
axios.get(`http://localhost:8000/api/cars`)
.then(res => {
const cars= res.data.records;
this.props.dispatch({
type:'GET_CARS',
cars});
})
}
}
export default connect(mapStateToProps)(ListCars);
How i can make a reducer that add to props.cars the return of axios get? my actually reducer is don't working:
const CarReducer= (state = [], action) => {
switch(action.type) {
case 'ADD_CAR':
return state.concat([action.data]);
case 'GET_CARS':
return state.map(car =>
car
)
default:
return state;
}
}
export default carReducer

Answer 1

You dispatched this plain object to Redux:
this.props.dispatch({ type:'GET_CARS', cars })
So, you will be able to receive your data from action.cars in your reducer and add it to your Redux store:
const CarReducer = (state = [], action) => {
switch(action.type) {
case 'ADD_CAR':
return state.concat([action.data]);
case 'GET_CARS':
// Receive data from action.cars
// I am assuming your data is in an array
return [...state, ...action.cars];
default:
return state;
}
}
Then, in your component, you should be able to receive the data from the API by using connect() from react-redux:
import { connect } from 'react-redux';
class App extends React.Component {
render() {
return (
<div>
{this.props.cars.map((car) =>
<Car key={car.Id} car={car} />
)}
</div>
);
}
}
const mapStateToProps = state => {
return { cars: state.cars }
}
export default connect(mapStateToProps)(App)