brianegan / redux_thunk

Redux Middleware for handling functions as actions
MIT License
88 stars 8 forks source link

How do I use redux_thunk with combineTypedReducers? #6

Closed atreeon closed 6 years ago

atreeon commented 6 years ago

I'm a little confused as to how to use this with my reducer and my widget (I have managed to get a few redux flutter basic examples working ok).

I'm using combineTypedReducers to manage my reducers

final lessonsReducer = combineTypedReducers<List<Lesson>>([
  new ReducerBinding<List<Lesson>, LessonsAddAction>(_lessonsAdd),
  new ReducerBinding<List<Lesson>, ???>(_lessonsLoad)]);
Function(Store<AppState>) _lessonsLoadAction = (Store<AppState> store) async {
  final lessonsLoad = await new Future.delayed(
    new Duration(seconds: 5),
    () => myLessons, //a simple list of lesson objects
  );

  store.dispatch(lessonsLoad);
};

I'm a little unsure how these both go together. My actions are classes but this is a method, in the ReducerBinding I get a '_lessonsLoadAction is not a type' (because it isn't!).

Many thanks in providing the redux implementations and apologies for the beginner flutter / dart / redux question! :-)

atreeon commented 6 years ago

It works :-) The thunk initially bypasses the reducer. When the future returns, the future dispatches an action that is recognised by the reducer.

//action recognised by reducer
class LessonsLoadAction {
  final List<Lesson> lessons;
  LessonsLoadAction(this.lessons);
}

//async action that is delayed that, once complete, returns an action recognised by the reducer
Function(Store<AppState>) lessonsLoadAsyncAction = (Store<AppState> store) async {
  final lessonsLoadResults = await new Future.delayed(
    new Duration(seconds: 10),
    () => new LessonsLoadAction(myLessons),
  );

  store.dispatch(lessonsLoadResults);
};

//reducer
final lessonsReducer = combineTypedReducers<List<Lesson>>([
  new ReducerBinding<List<Lesson>, LessonsLoadAction>(_lessonsLoadAction),
  new ReducerBinding<List<Lesson>, LessonsAddAction>(_lessonsAddAction),
]);
List<Lesson> _lessonsLoadAction(
    List<Lesson> lessons, LessonsLoadAction action) {
  return action.lessons;
}