Как правильно вызвать action в redux?

16 марта 2022, 16:10

У меня есть метод getColor

export const GET_COLOR = 'GET_COLOR'
export function getColor() {
  return (dispatch: any) => {
    dispatch({
      type: GET_COLOR,
    })
  }
}

Как мне правильно обратиться к нему при onClick? Использую стэк typescript/react/redux.

import React from 'react'
import '../index.css'
interface ButtonProps {
  getColor: any,
}
const ComponentButton: React.FC<ButtonProps> = props => {
  return (
    <div>
      <button onClick={props.getColor}>Click me!</button>
    </div>
  )
}
export default ComponentButton

reducer page.ts:

import {GET_COLOR} from '../actions/PageActions'
const initialState = {
  isClicked: false,
  background: "blue"
}
    export function pageReducer(state = initialState, action : any) {
      switch (action.type) {
        case GET_COLOR:
          return {...state, background: "red", isClicked: !state.isClicked};
        default:
          return state
      }
    }

reducer: index.ts

import {combineReducers} from 'redux'
    import {pageReducer} from './page'

    export const rootReducer = combineReducers({
      page: pageReducer
    })

На чистом react+redux обращение к методу выглядело бы так : onClick ={this.props.getColor}. Не могу понять логику как обратиться к методу, если я использую typescript.

Answer 1

Использую хуки из библиотеки react-redux, можно сделать следующим образом

import React from 'react'
import { useDispatch } from 'react-redux'
import { getColor } from './actions'
import '../index.css'
interface ButtonProps {
  getColor: any,
}
const ComponentButton: React.FC<ButtonProps> = props => {
  const dispatch = useDispatch();
  const handleButtonClick = () => {
    dispatch(getColor());
  };
  return (
    <div>
      <button onClick={props.getColor}>Click me!</button>
    </div>
  )
}
export default ComponentButton

Answer 2

для этого ведь есть специальный пакет react-redux.

что он делает?

позволяет легко передавать state и dispatch из store в компоненты с помощью своего метода connect. собственно, вот ссылка.

как бы выглядел Ваш код?

import React from 'react'
import { connect } from 'react-redux'  //импортируем метод пакета
import '../index.css'
interface ButtonProps {
  getColor: any,
}
const ComponentButton: React.FC<ButtonProps> = props => {
  return (
    <div>
      <button onClick={this.props.getColor}>Click me!</button>   //обращаемся к actionCreator через this.props
    </div>
  )
}
const mapStateToProps = null;  //это нам пока что не надо (здесь импортируется store в компонент).
const mapDispatchToProps = { getColor }; //добавляем все нам нужные actionCreators, все они сразу станут доступны в компоненте внутри props
export default connect(mapStateToProps, mapDispatchToProps)(ComponentButton); //подсоединяем наши добавленные store и actionCreators

обратите внимание, что все импортируемые данные store и Ваши actionCreators через react-redux методом connect доступны внутри компонента через props. и это очень удобно. + зачем Вам TS, если Вы всё равно используете any type?)