将变量传递给 mapDispatchToProps 中的操作

Question

import React from "react"
import {connect} from "react-redux"
import {increment} from "./redux"

function App(props) {    
    return (
        <div>
            <h1>{props.count}</h1>
            <button onClick={()=>props.handleClick(5)}>+</button>
        </div>
    )
    let mapDispatchToProps=(dispatch)=>
    {
        handleClick:(who)=>dispatch({
            type: "INCREMENT",
            count:who
        })    
    }
}
export default connect(state => ({count: state}),mapDispatchToProps)(App)




import redux, {createStore} from "redux"

export function increment(count) {
    return {
        type: "INCREMENT",
        count
    }
}

export function decrement() {
    return {
        type: "DECREMENT"
    }
}

function reducer(count = 0, action) {
    switch(action.type) {
        case "INCREMENT":
            return count + 1
        case "DECREMENT":
            return count - 1
        default:
            return count
    }
}

const store = createStore(reducer)
store.subscribe(() => console.log(store.getState()))
export default store

发现错误：ReferenceError：未定义 mapDispatchToProps (/App.js:25)

我该如何解决这个问题？ 我对此很困惑.....我需要根据传递的值增加值，请帮助我解决这个问题。

Answer 1

问题是您将 mapDispatchToProps function 包装在 App 组件中。

function App(props) {    
    return (
        <div>
            <h1>{props.count}</h1>
            <button onClick={()=>props.handleClick(5)}>+</button>
        </div>
    )
}

let mapDispatchToProps=(dispatch)=>
    ({
        handleClick:(who)=>dispatch(increment(who))    
    })

export default connect(state => ({count: state}),mapDispatchToProps)(App)

我对您的 function 创建器和减速器有一个建议。 据我所知，您想要增加的值取决于您的有效负载，而不仅仅是 count + 1。您可以执行以下操作。

// Increment function creator
export function increment(count) {
    return {
        type: 'INCREMENT',
        payload: count
    }
}

// Reducer
function reducer(count = 0, action) {
    switch(action.type) {
        case: 'INCREMENT':
          return count + action.payload
        case: 'DECREMENT':
          return count - 1
        default: return count
    }      
}

希望对您有所帮助，我也是新手，学习愉快。

Answer 2

假设我们正在使用Container Presentational Component

// container.js
import { connect } from "react-redux";
import { Login } from "../components/login/login.component";
import { loginUser } from "../modules/user/user.actions";

const toState = undefined;

const toDispatch = {
    login: loginUser,
};

export default connect(toState, toDispatch)(Login);

演示组件看起来像：

export class Login extends Component {
...
   onSubmit (event) {
     const { login } = this.props;

     const { name: pass } = this.state;
     login({ name: pass });
   }
...
}

loginUser 操作创建者如下所示：

export function loginUser (credentials) {
  return { type: "Login/user", payload: credentials }
}