Обрабатывать событие onClick с использованием приставки

Question

Я новичок в редуксе, поэтому просто пытаюсь применить редукс к очень простому приложению. Он просто переключает слово при каждом нажатии кнопки. Но как мне передать свою функцию handleClick кроме действия? Пока ничего не происходит, когда я нажимаю кнопку.

App.js

import React, { Component } from "react";
import { connect } from 'react-redux'; 

import MyButton from "./MyButton";
import { handleClick } from "./actions"; 

import "./styles.css";

class App extends Component {
  handleClick = () => {
    if (this.state.text === "initial text") {
      this.setState({ text: "" });
    } else {
      this.setState({ text: "initial text" });
    }
  }

  render() {
    return (
      <div className="App">
        <MyButton onClick={()=>this.props.handleClick('hi')} />
        <p>{this.props.text}</p>
      </div>
    );
  }
}

const mapStateToProps = state => ({
    text: state.text
})

const mapDispatchToProps = dispatch => ({
  handleClick: () => dispatch(handleClick)
})

export default connect(mapStateToProps, mapDispatchToProps)(App)

MyButton.js

import React, { Component } from "react";

class MyButton extends Component {
  render() {
    return <button onClick={this.props.onClick}>
            Click Me!
            </button>;
  }
}

export default MyButton;

actions.js

export const handleClick = text => ({
  type: "test_action",
  payload: { ...text }
});

redurs.js

export const reducer = (state = {text:'initial_text'}, action) => {
  if(action.type === 'test_action') {
    return Object.assign({}, state, action.payload)
  }
  return state; 
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux'; 
import { createStore } from 'redux'; 

import { reducer } from "./reducers"; 
import App from "./App"; 

import "./styles.css";

const store = createStore(reducer); 

const rootElement = document.getElementById("root");
ReactDOM.render(<Provider store={store}><App /></Provider>, rootElement);

Answer 1

Вы должны передать аргумент своей функции handleClick:

const mapDispatchToProps = dispatch => ({
  handleClick: (text) => dispatch(handleClick(text))
})

или просто:

const mapDispatchToProps = { handleClick }

Ваше действие заключается в распространении строки внутри объекта, вы должны использовать ее какis:

export const handleClick = text => ({
  type: "test_action",
  payload: text
});

И ваш редуктор устанавливает целое состояние, а не только текстовое свойство. Вы можете избежать путаницы, разделив и рекомендовав редуктор:

import { combineReducers } from 'redux'

export const text = (state='', action) => {
  if(action.type === 'test_action') {
    return action.payload;
  }
  return state; 
}

export const reducer = combineReducers({
  text
})

Answer 2

Проблема в том, что свойство mapDispatchToProps handleClick в приведенном выше коде не принимает аргументы

const mapDispatchToProps = dispatch => ({
  handleClick: (val) => dispatch(handleClick(val)) // update here so that the 'hi' text is passed to the action creator
})

<MyButton onClick={()=>this.props.handleClick('hi')} />

Обновление

Состояние не обновляется правильно

return Object.assign({}, state, { text: action.payload }) //pass an object and not just the value