Can't access values from redux state event hough I have an instance of the class - flutter

Question

I have some state that is added during some middleware. This state is used to build ListTiles for a ListView. I cannot access the properties of this instance when I map over the instance.
I can see the info in the debugger: https://imgur.com/a/YTpjBou
But I cannot access the property because it returns null. I am unsure if this is because the future has not completed by the time it renders or what.
Here is the build for the home_widget
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
import 'package:nasp_portal_app/model/model.dart';
import 'main_drawer.dart';
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Image.asset('lib/images/Logo.png', height: 35),
),
drawer: DrawerOnly(),
body: StoreConnector<AppState, _ViewModel>(
converter: (Store<AppState> store) => _ViewModel.create(store),
builder: (BuildContext context, _ViewModel viewModel) => Column(
children: <Widget>[Expanded(child: ItemListWidget(viewModel))],
),
),
);
}
}
class ItemListWidget extends StatelessWidget {
final _ViewModel model;
ItemListWidget(this.model);
#override
Widget build(BuildContext context) {
return ListView(
children: model.tournaments.map((Tournament tournament) {
return ListTile(
title: Text(tournament.tournName ?? 'Test'),
leading: IconButton(
icon: Icon(Icons.home),
onPressed: () => print('go to tourney'),
));
}).toList(),
);
}
}
class _ViewModel {
final List<Tournament> tournaments;
_ViewModel({this.tournaments});
factory _ViewModel.create(Store<AppState> store) {
print(store.state.tournaments.length);
return _ViewModel(tournaments: store.state.tournaments);
}
}
Here is the class definition of a Tournament
class Tournament {
final String tournName;
final String tournState;
final String tournCity;
final double distanceMiles;
final int startDate;
final int endDate;
final int tID;
Tournament({
#required this.tournName,
#required this.tournState,
#required this.tournCity,
#required this.distanceMiles,
#required this.startDate,
#required this.endDate,
#required this.tID,
});
Tournament copyWith({
String tournName,
String tournState,
String tournCity,
double distanceMiles,
int startDate,
int endDate,
int tID,
}) {
return Tournament(
tournName: tournName ?? this.tournName,
tournState: tournState ?? this.tournState,
tournCity: tournCity ?? this.tournCity,
distanceMiles: distanceMiles ?? this.distanceMiles,
startDate: startDate ?? this.startDate,
endDate: endDate ?? this.endDate,
tID: tID ?? this.tID,
);
}
}
This is my redux middleware handling the async task
class NearTournamentsMiddleware extends MiddlewareClass<AppState> {
#override
void call(Store<AppState> store, dynamic action, NextDispatcher next) {
if (action is NearTournamentsAction) {
checkNearTournaments(next);
}
next(action);
}
void checkNearTournaments(NextDispatcher next) async {
final tournaments = await _tournamentsInRange();
for (final tournament in tournaments) {
next(AddTournamentsAction(
tournament['TournName'],
tournament['TID'],
tournament['TournState'],
tournament['TournCity'],
tournament['Distance_Miles'],
tournament['Start_Date'],
tournament['End_Date']));
}
}
_tournamentsInRange() async {
Map currentLocation = <String, double>{};
var location = Location();
try {
currentLocation = await location.getLocation();
final response = await _checkLocalTournaments(
currentLocation["latitude"], currentLocation["longitude"]);
final decoded = jsonDecode(response.body);
return decoded;
} on PlatformException {
currentLocation = null;
}
}
Future<http.Response> _checkLocalTournaments(lat, lng) async {
var url = 'https://napi.com';
var body = json.encode({
'miles': '-1', // -1 for test api
'lat': lat,
'lng': lng
});
Map<String, String> headers = {
'Content-type': 'application/json',
'Accept': 'application/json',
};
final response = await http.post(url, body: body, headers: headers);
return response;
}
}
These are my current reducers
import 'package:nasp_portal_app/model/model.dart';
import 'package:nasp_portal_app/redux/actions.dart';
AppState appStateReducer(AppState state, action) {
return AppState(tournaments: tournamentReducer(state.tournaments, action));
}
List<Tournament> tournamentReducer(List<Tournament> state, action) {
if (action is AddTournamentsAction) {
return []
..addAll(state)
..add(Tournament(
tournName: action.tournName,
tournState: action.tournState,
tournCity: action.tournCity,
distanceMiles: action.distanceMiles,
startDate: action.startDate,
endDate: action.endDate,
tID: action.tID));
}
return state;
}
How can I properly access the values in the map in my screenshot? I know I have an instanced based on the debugger but cannot get its properties.

Answer 1

My issue was with the redux action that I was using called AddTournamentsAction
I was not using this to refer to the class variables in its constructor like so:
class AddTournamentsAction {
final String tournName;
final String tournState;
final String tournCity;
final double distanceMiles;
final int startDate;
final int endDate;
final int tID;
AddTournamentsAction(
tournName,
tournState,
tournCity,
distanceMiles,
startDate,
endDate,
tID,
);
}
To fix this I simply had to add the this keyword:
class AddTournamentsAction {
final String tournName;
final String tournState;
final String tournCity;
final double distanceMiles;
final int startDate;
final int endDate;
final int tID;
AddTournamentsAction(
this.tournName,
this.tournState,
this.tournCity,
this.distanceMiles,
this.startDate,
this.endDate,
this.tID,
);
}