Антон Спирин

function* runPromise() {
  try {
    const result = yield call(promise);
    yield put({
       type: CHANGES_CHANGE_SUCCESS,
       payload: result,
    });
  } catch (error) {
    notify("Ошибка: ", error);
  }
}

В чем может быть причина?

Видимо, в плохом знании JavaScript и невнимательности.

const mapStateToProps = state => {  // принимаем аргумент
  return {
    name: state && state.name,  // используем аргумент
  };
};

Короткий вариант записи:

const mapStateToProps = state => ({
  name: state && state.name,
});

Вот контекст стрелочной функции, объявленной в глобальном скоупе.
Вот к чему обращались вы, вместо аргумента state.

Серверные запросы делают в componentDidMount и componentDidUpdate. Почитать на эту тему.

1. Сами
2. Пишем ручками (+10 к читаемости, +10 к статическому анализу, -100 к когнитивной нагрузке) Конечно в случае если вы пишите dashboard с кучей моделей, имеет смыл написать CRUD Boilerplate
3. В 99.99% случаев хранение состояния форм в store бессмысленно и неоправданно

Если вы хотите дождаться выполнения асинхронных вызовов в асинхронных функциях, то их надо делать с использованием ключевого слова await. Вызовы dispatch с передачей обычных объектов действий выполняются синхронно.

const someCall = () => async dispatch() => {
  dispatch({type: Constant.SOME_OPERATION_1});
  await dispatch(createAccount());
  dispatch({type: Constant.SOME_OPERATION_2});
};

export const createAccount = () => async (dispatch) => {
  await request api;
  dispatch({type: SMTH});
  await another request api;
  dispatch({type: SMTH2});
}

Так же для обработки неудачных ответов сервера можно использовать try/catch:

export const createAccount = () => async (dispatch) => {
  try {
    await request api;
    dispatch({type: SMTH});
    await another request api;
    dispatch({type: SMTH2});
  catch (e) {
    // handle error here
  }
}

Либо перепишите Grid на forwardRef по аналогии с примером:

const Grid = React.forwardRef((props, ref) => (
  <div ref={ref}>{props.children}</div>
));

Либо исправьте:

export class MyComponent extends React.Component {
  render() {
    return (
      <Grid innerRef={this.props.forwardRef} />
    );
  }
}

и в компоненте Grid:

const Grid = props => (
  <div ref={props.innerRef}>{props.children}</div>
);

Вы передаете в вызов функции call строку, а она принимает первым аргументом функцию:
call(fn, ...args)
последующие аргументы передаются в вызов функции fn.

Provider передает данные store в контекст.
connect использует эти данные, поэтому использовать этот HOC можно только в компонентах дочерних Provider.
Вам надо немного реорганизовать структуру:

import { render } from 'react-dom';
import {createStore} from "redux";
import rootReducer from "../reducers";
import Auth from './components/Auth';

const store = createStore(rootReducer);

render(
  <Provider store={store}>
    <BrowserRouter>
      <Auth />
    </BrowserRouter>
  </Provider>, 
  document.getElementById('root'),
);

import React, {Component} from 'react';
import {connect} from 'react-redux';

class Auth extends Component {
  render() {
    return (
      <Switch>
        <Route exact path={this.props.api.signin} render={() => Test}/>
      </Switch>
    );
  }
}


const mapStateToProps = state => ({
  api: state.api,
});

export default connect(mapStateToProps)(Auth);

Можно использовать redux-thunk
статья по теме

Абстрактный пример асинхронного действия с запросом:

const fetchUsers = params => async dispatch => {
  try {
    const data = await Api.fetchUsers(params);
    dispatch(fetchUsersSuccess(data));
  } catch (e) {
    dispatch(fetchUsersFail(e));
  }
}

В случае успеха данные диспатчатся в store, в случае ошибки диспатчится ошибка для дальнейшей обработки.

bindActionCreators получает на вход объект с AC, либо функцию и возвращает объект с AC, обернутыми в вызов dispatch или в случае с функцией функцию обернутую в dispatch.

Если вы передаете в connect вторым аргументом объект:

const mapDispatchToProps = {
  getProducts,
};

То ваш объект в процессе вызова connect будет передан в вызов bindActionCreators и каждый AC будет обернут в вызов dispatch.
Этот вариант записи, в вашем случае, является предпочтительным, так как он короче.

Ручное оборачивание AC в dispatch:

const mapDispatchToProps = (dispatch, ownProps) => ({
  getProducts: () => dispatch(getProducts()),
});

Тут можно использовать второй аргумент ownProps, ограничить количество принимаемых AC аргументов или поменять их порядок, а так же передать дополнительные функции, которые не надо оборачивать в dispatch.

Вызов bindActionCreators на объекте с AC:

cosnt mapDispatchToProps = dispatch => bindActionCreators(
  {
    getProducts,
  },
  dispatch,
);

В использовании такого варианта записи нет особого смысла, так как первый вариант записи короче.
Но можно ее видоизменить:

const mapDispatchToProps = (dispatch, ownProps) => ({
  ...bindActionCreators(
    {
      ...productsActions,
      ...usersActions,
      ...ordersActions,
    },
    dispatch,
  ),
  () => getSomeOther(ownProps.someProp),
  notNeedsToWrapInDispatch,
})

В таком виде можно передать в bindActionCreators много AC как есть и отдельно передать дополнительные AC обернутые в dispatch, которые будут использовать ownProps или функции которые не надо оборачивать в dispatch.

Да много их. Все зависит от размера проекта, количества разработчиков и многих других факторов.
Вот хорошая подборка Дальше уже гуглите, темы которые интересуют.
Почитайте обязательно про ducks pattern, об отличиях File Type First и Feature First подходов к организации структуры.

Актуален и еще долго будет.

Ваш пример написан некорректно. Исправленный вариант:

const funcName  = () = > dispatch => {
  return dispatch({
    type: NAME_TYPE,
    payload: lol
  });
}

Что значить dispatch в данном коде?

Это первый аргумент который использует функция, возвращаемая вашим AC:

dispatch => {
  return dispatch({
    type: NAME_TYPE,
    payload: lol
  });
}

Если подключен redux-thunk он перехватывает все функции возвращаемые AC и выполняет их, передавая первым аргументом store.dispatch.

Почему мы его не передаем как аргумент в скобках?

Если правильно вас понял, то при передаче одного аргумента парсер одинаково обрабатывает оба варианта записи:
const foo = (bar) => bar;
и
const foo = bar => bar;

Еще, в данном примере нет никакого смысла возвращать функцию, так как выполняются бессмысленные операции(перехват промежуточным ПО и новый диспатч), ваш AC можно сократить до:

const funcName  = () = > ({
  type: NAME_TYPE,
  payload: lol,
});

Не надо копить, а затем отправлять все данные сразу. Коллекциями их принято только забирать с сервера.
1. Каждое добавление карточки это POST запрос на добавление одной карточки.
2. Каждое добавление записи это POST запрос на добавление записи.
3. Каждое обновление записи или карточки это PUT/PATCH запрос с обновленными данными одной записи/карточки.
4. При удалении карточки, если записи лежат отдельно, на стороне сервера надо их так же удалить.

export const actionFromA = data => async (dispatch) => {  
  dispatch(actionFromA());
}

Документацию хоть почитайте.
Аргумент dispatch это функция store.dispatch.
Обновление состояния хранилища инициируется передачей в эту функцию объекта действия:
store.dispatch({ type: 'action_name' });
Ваш action creator actionFromA() возвращает подобный объект. И вызов:
dispatch(actionFromA());
Эквивалентен:

store.dispatch({ /* объект возвращаемый actionFromA */ });

На egghead много видео уроков, в том числе два бесплатных курса от Дена Абрамова.
https://egghead.io/browse/libraries/redux
Платные, при желании, можно найти бесплатно на просторах интернета.

Так обрабатываете это действие во всех нужных редьюсерах. Они вызываются по цепочке.

Если надо только заполнять одну форму, то нет. Если надо еще и работать с полученными данными, то лучше использовать.

Попробуйте так:

yield all(effects)
yield put({type: 'LOAD_END', payload: {results} })