Как сохранить данные в хранилище, передаваемые из метода компонента, используя mapDispatchToProps?

Question

[Funny_Cat]

Добрый день! Имеется функция (метод) add() в главном компоненте SmallApp. Вызывается эта функция в другом компоненте - AddComponent.

Если использовать функцию dispatch хранилища непосредственно через свойства компонента, то код работает нормально и данные сохраняются в state через редьюсер - this.props.store.dispatch(increase_number(this.props.current_number + value))

Однако мне хочется использовать в коде только создатель действия - increase_number без обращения к функции dispatсh через свойства хранилища - increase_number(this.props.current_number + value). Как это сделать? При использовании функции mapDispatchToProps в connect, компонент не рендерится...

SmallApp.js

// import...

class SmallApp extends React.Component {

	constructor(props){
		super(props)

		this.add = this.add.bind(this)
	}

	add(value){
		this.props.store.dispatch(increase_number(this.props.current_number + value))
	}

	render(){

		const {add} = this

		return (
			<div>
				<AddComponent add = {add} />
			</div>
		)
	}
}

const mapStateToProps = (state) => {
	return {
		current_number: state.current_number
	}
}

const mapDispatchToProps = dispatch => {
	return {
		increase_number: (value) => dispatch(increase_number(value))
	}
}

export default connect(mapStateToProps,mapDispatchToProps)(SmallApp)

AddComponent.js

// import...

const AddComponent = ({add}) => {
	
	return (
		<div>
			<a onClick={() => add(10)}>Кликнуть!</a>
		</div>
	)

}

export default connect()(AddComponent)

Answer 1

[Islam Ibakaev]

// actions.js
export const increaseNumber = value => ({ type: 'INCREASE_NUMBER', value })

//reducer.js
...
case 'INCREASE_NUMBER':
    return {...state, value: state.value + action.value}
...
// SmallApp.js
import { increaseNumber } from '..путь до/actions'
...
  render(){

    return (
      <div>
        <AddComponent add = {this.props.increaseNumber} />
      </div>
    )
  }
...

export default connect(mapStateToProps, { increaseNumber })(SmallApp)

p.s. подключение AddComponent к хранилищу излишнее

Comments

[Funny_Cat]

Это простой пример. В более сложных приложениях в условной функции add() условного компонента SmallApp может быть написан код с определёнными вычислениями (возможно, с применением ajax для обращения к серверу). Типа этого:

add(value){
   // ajax-запрос
   // прочие вычисления
   // обновление хранилища (данные получены путём вычислений в этой же функции)
 }

Как поступить в данном случае? Или весь код перекинуть в создатель действия?

[Islam Ibakaev]

Funny_Cat, для сайд-эффектов есть redux-thunk

export const increaseNumberAsync = value => dispatch => {
    setTimeout(() => dispatch(increaseNumber(value)), 1000)
}