Как "bindActionCreators" с сокращением

Я новичок в JavaScript и реагирую, и у меня есть существующий проект, для которого мне нужно добавить функциональность. Он использует redux и redux-thunk с redux-saga для отправки запросов API. В настоящее время он поддерживает только 1 dispatch функцию для каждого компонента, и мне нужно dispatch несколько типов запросов к саге. Я пытаюсь bindActionCreators добавить dispatch в магазины, но безрезультатно. Я полностью потерял часть mapDispatchToProps и как мне "запустить действие" впоследствии.

в одной отправке в реквизиты, я сделал это:

let sdtp = (arg) => {
   return (dispatch) => {
     dispatch({
       type: 'GET_TEST_HASHMAP_SAGA',
       hashmap: arg
     })
   }
 }

export default MainPage = connect(
   mapStateToProps,
   { sdtp }
)(MainPage);

и я могу "получить доступ к функции" (это правильный термин, по крайней мере, моя сага вызывается) внутри компонента MainPage.render():

`this.props.sdtp({'hello':'world'});`

но когда я перейду на использование bindActionCreators, я больше не могу получить доступ к нему в реквизитах (я пробовал столько разных экспериментов, которые я почти сдал)

Вот как я создаю несколько рассылок:

let action1 = (args) => {
   return (dispatch) => {
      dispatch({
         type: 'GET_TEST_HASHMAP_SAGA',
         hashmap: arg
      });
   }
}

let action2 = (args) => {
   return (dispatch) => {
      dispatch({
         type: 'GET_TEST_HASHMAP_SAGA2',
         params: arg
      });
   }
}

let action3 = (args) => {
   return (dispatch) => {
      dispatch({
         type: 'GET_TEST_HASHMAP_SAGA3',
         args: arg
      });
   }
}

let mdtp = (dispatch) => {
  return {
    actions: bindActionCreators(action1, action2, action3, dispatch)
  }
}

export default MainPage = connect(
   mapStateToProps,
       { mdtp }
)(MainPage);

Я пытаюсь получить доступ к actions следующим образом:

this.props.mdtp.action1({arg: 'hello'});

Спасибо заранее!

Ответы

Ответ 1

connect принимает четыре аргумента... большинству людей обычно нужны только первые два.

mapStateToProps у вас есть, и я предполагаю, что это функция.

mapDispatchToProps является вторым... проблема там.

bindActionCreators - не что иное, как цикл for... оставьте это, и вы лучше поймете, что происходит.

Попробуйте следующее:

function mapDispatchToProps(dispatch) {
  return {
     action1: (args) => dispatch(action1(args)),
     action2: (args) => dispatch(action2(args)),
  }
}

 export default MainPageContainer = connect(
   mapStateToProps, mapDispatchToProps
 )(MainPage)

И назовите их как this.props.action1(args) и this.props.action2(args)

Если вы настаиваете на использовании переоцененного bindActionCreators, синтаксис будет выглядеть следующим образом:

 function mapDispathToProps(dispatch){
   return {
     actions: bindActionCreators({
       action1,     
       action2,
     }, dispatch)
   }
 }

Кроме того, используйте const вместо let... вы не переопределяете значение. Также лучше экспортировать подключенный компонент под другим именем, чем имя класса компонента.

Ответ 2

В вашей функции mpdt вам нужно вернуть результат вызова bindActionCreators, а не объект с ключом действия.

Итак, это должно быть

const mdtp = (dispatch) => {
  return bindActionCreators({
    action1, action2, action3
  }, dispatch);
};

и вы можете назвать их как this.props.action1(...)

Из вашего кода также кажется, что вы путаете два способа передачи создателей действий компоненту. Один из способов описан выше. И другим способом, вы можете передать своих создателей действий непосредственно в connect() с использованием объектных обозначений, например

export default MainPage = connect(
   mapStateToProps,
   { action1, action2, action3 }
)(MainPage);

который будет иметь тот же результат. И ваш первый подход, используя sdtp action creator, использует этот подход.

Ответ 3

В качестве альтернативы вы также можете полностью пропустить mapDispatchToProps.

В вашей функции render() вы можете просто вызвать dispatch прямо следующим образом:

this.props.dispatch({type: 'GET_TEST_HASHMAP_SAGA2', params: {"hello": "world"}});

Затем в вашей функции connect вы можете полностью пропустить параметр mapDispatchToProps.

export default MainPage = connect(
   mapStateToProps
)(MainPage);

Я знаю, что это не ответ, но это просто альтернатива, которая работает также