как `bindActionCreators` с помощью redux-thunk

Я новичок в 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'});

Заранее спасибо!


react-native react-redux redux-thunk redux-saga
person Zennichimaro    schedule 18.11.2017    source источник

Ответы (3)


arrow_upward
9
arrow_downward

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 mapDispatchToProps(dispatch){
   return {
     actions: bindActionCreators({
       action1,     
       action2,
     }, dispatch)
   }
 }

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

person parker    schedule 18.11.2017
comment
Спасибо за объяснение! Я вообще не знал другого пути, погуглил, просто показал bindActionCreators и подумал, что это единственный способ, лол.. кстати, я попробовал твой bindActionCreators способ, он не работает, тот, что от @Magneticz, который возвращает результат bindActionCreators напрямую работает, хотя - person Zennichimaro; 18.11.2017
comment
В этом ответе опечатка. mapDispathToProps должен быть mapDispatchToProps. Я пытался редактировать, но правки должны быть не менее 6 символов. Комментирование, чтобы те, кто копирует и вставляет окончательный блок кода, не расстраивались. - person Iammesol; 31.05.2018

arrow_upward
2
arrow_downward

В вашей функции 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 использует этот подход.

person magneticz    schedule 18.11.2017
comment
Спасибо! Я был ослеплен преобразователь, так много параметров и функций внутри функции, я не знал, что вы можете просто { x, y, z } все вместе. Это еще один хороший ответ, но извините, что я принял ответ только что. - person Zennichimaro; 18.11.2017

arrow_upward
1
arrow_downward

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

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

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

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

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

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

person Hakim Hauston    schedule 18.11.2017