0_actions.js

import { makeThunkAsyncActionCreator } from 'redux-toolbelt-thunk'
import { fetchTodosFromServer } from './api'

export const fetchTodos = makeThunkAsyncActionCreator('FETCH_TODOS', fetchTodosFromServer)

1_reducers.js

import { makeAsyncReducer } from 'redux-toolbelt'
import { fetchTodos } from './actions'

export const todos = makeAsyncReducer(fetchTodos)

2_Main.js

import React from 'react'
import { connect } from 'react-redux'

import * as actions from './actions'

const Main = ({ fetchTodos, todos }) => (
  <div>
    <button onClick={fetchTodos}> Refresh </button>
    {todos.loading && (
      <span> loading.. </span>
    )}
    {todos.data && (
      <TodoList todos={todos.data}/>
    )}
  </div>
)

export default connect(
  state => ({ todos: state.todos }),
  { fetchTodos: actions.fetchTodos }
)(Main)