将变量传递给 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

Error found: ReferenceError: mapDispatchToProps is not defined (/App.js:25)

How do I solve this problem? I am much confused about it..... I need to increment the value as depending on the value being passed please help me out of this problem.

Answer 1

The problem is you wrap your mapDispatchToProps function in the App component.

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)

And I have a suggestion on your function creator and reducer. From what I see, you want to increase the value depends on your payload, not only count + 1. You can do as following.

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

Hope this help, I am new to react too, happy learning.

Answer 2

lets assume we are using 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);

the presentational component looks some like:

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

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

and the loginUser action creator looks like this:

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