Reactjs 使用redux处理“onClick”事件

我是redux新手，所以我只是尝试将redux应用于一个非常简单的应用程序。只要点击按钮，它就会切换单词。但是除了操作之外，我应该如何分派我的

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)

reducers.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);

从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“redux”导入{createStore}；
从“/reducers”导入{reducer}”；
从“/App”导入应用程序；
导入“/styles.css”；
const store=createStore（reducer）；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

问题在于上述代码中的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')} />

---

应将参数传递给handleClick函数：

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

或者只是：

const mapDispatchToProps = { handleClick }

您的操作是在对象内传播字符串，您应该按原样使用它：

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

你的reducer设置的是整个状态，而不仅仅是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
})

---

object.assign应该复制整个状态，这样，如果action.payload有一个text属性，那么这就不会是问题，但是如果它这样做，

{…text}

并且文本是字符串，那么它将返回拆分为字母数组的文本

const mapDispatchToProps = { handleClick }

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
})