Что такое mapDispatchToProps?

Question

[WarriorKodeK]

Всем привет. Не до конца понимаю зачем нужно mapDispatchToProps.

Допустим у меня есть action. В этом action у меня есть action creator и ф-ция которая делает dispatch.
Я импортирую ту функцию (которая делает диспатч) в компонент и в нужный момент вызываю ее.

Объясните пожалуйста, если можна на маленьком примере.

UPD:
После просмотра этого видео и прочтения комента от Антон Спирин все стало понятно, спасибо!

Comments

[Dmitriy Uvarov]

аналогичный вопрос

Answer 1

[nakree]

Сам недавно разбирался с этим, и пришел к такому пониманию (возможно оно не верное):
Компонент изначально ничего не знает про redux, редюсеры и экшены. Потому мы не можем просто вызвать dispatch с каким то экшеном (будет ошибка мол такая функция неопределенна)
Чтобы мы получили эту возможность, мы просим редакс через mapDispatchToProps, прислать нам эту функцию в виде колбека через пропсы. То есть мы получаем возможность сделать диспатч, а доступ к этой функции у нас есть через пропсы.

Answer 2

[Антон Спирин]

Это объект или функция передаваемая в connect вторым аргументом.
Если вы передаете в connect вторым аргументом объект с AC, то connect оборачивает ваши AC в функцию-обертку () => store.dispatch(AC) и передаёт в props компонента. Если передаете вторым аргументом функцию, connect выполняет ее, передавая на вход первым аргуменом store.dispatch, вторым props компонента, и передаёт в props компонента результат выполнения. Все.

Comments

[WarriorKodeK]

Простите что задаю тупые вопросы, но могли бы вот на этом примере обьяснить какую функцию выполняет mapdispatchtoprops

action

export const getConditionById = (domenKey, apiKey, id) => {
  const domenPath = domen[domenKey],
    apiPath = api[apiKey];
  return Api.get(`${domenPath}${apiPath}/${id}`).then(res => {
    if (res) {
      const { data } = res.data;
      const body = { ...data };
      store.dispatch({
        type: `${CREATE_QUESTION}_SET_COND_QUESTION`,
        payload: { body }
      });
      return data;
    }
  });
};



export const clearCreateQuestion = () =>
  store.dispatch({ type: `${T.CREATE_QUESTION}_CLEAR` });

Я импортирую его в компонент (используя его там)

import

import {
  clearCreateQuestion,
  getConditionById
} from "../../../../actions";

В конце у меня

const mapDispatchToProps = dispatch =>
  bindActionCreators({ dispatch }, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(
  CreateConditionComponent
);

[Антон Спирин]

WarriorKodeK, ох. Во-первых установите и подкючите redux-thunk это отличное middleware для асинхронных действий.
Ваше действие:

export const getConditionById =  id => async dispatch => {
  const domenPath = domen[domenKey];
  const apiPath = api[apiKey];
  
  try {
    const { data } = await Api.get(`${domenPath}${apiPath}/${id}`);
    
    dispatch({
      type: `${CREATE_QUESTION}_SET_COND_QUESTION`,
      payload: { body: data },
    });
      
    return data;
  } catch (e) {
    console.log(e);
  }
};

export const clearCreateQuestion = () => ({ type: `${T.CREATE_QUESTION}_CLEAR` });

Ваш connect:

const mapDispatchToProps = {
  clearCreateQuestion,
  getConditionById,
};

export default connect(mapStateToProps, mapDispatchToProps)(CreateConditionComponent);

Самому со store.dispatch работать не надо, connect обернет в него все вызовы за вас. Когда передаете в mapDispatchToProps объект(как в моем приере) он передается в вызов bindActionCreators.

[WarriorKodeK]

Антон Спирин, Смотрите, правильно ли я понял, что в mapDispatchToProps, делается для тех ф-ций которые как-то зависисят от пропсов или ф-ции которые имеют в себе dispatch?

[Антон Спирин]

WarriorKodeK, mapDispatchToProps используется для передачи AC в props компонента в виде функций которые просто вызывать.

componentDidMount() {
  const { id,  getConditionById } = this.props;

  getConditionById(id);
}

Но да вы можете использовать воторой аргумент ownProps и передавать в mapDispatchToProps props компонента. Это редкий кейс. Я в проектах ни разу его не использовал. В mapStateToProps второй аргумент используется часто.

[WarriorKodeK]

Антон Спирин, Всё спасибо. Еще раз прошу прощение за столь тупые вопросы)

[Антон Спирин]

WarriorKodeK, обращайтесь, если что-то еще будет непонятно.)

[Антон Спирин]

WarriorKodeK, я там в примере забыл ключевое слово await написать. Добавил, посмотрите.

[WarriorKodeK]

Антон Спирин, Это и без того было понятно) Спасибо.

[WarriorKodeK]

Антон Спирин, Опять вас потревожу. Что я делаю опять не так?

https://codesandbox.io/s/o49klk1759

UPD:
Затупил) Сделал. Посмотрите пожалуйста, хорошо ли так писать или делать dispatch(increment())?

https://codesandbox.io/s/o49klk1759

[Антон Спирин]

WarriorKodeK, смотрите вы делаете actions такого вида:

export const decrement = () => dispatch => {
  dispatch({
    type: DECREMENT
  });
};

Так как decrement возвращает функцию:

dispatch => {
  dispatch({
    type: DECREMENT
  });
};

Его перехватывает redux-thunk, вот тут и вызывает передавая на вход store.dispatch, getState и опциональный аргумент.
Так как ваши acions не содержат асинхронных вызовов, передавать их в таком виде нет смысла. Можно изменить на:

export const decrement = () => ({ type: DECREMENT });

А возвращаемый объект в редьюсере:

return {
   ...state,
  value: state.value + 1
};

можно сократить до:

return {
  value: state.value + 1
};

так как state редьюсера содержит только ключ value.