0

При диспатче экшена в сам экшн передаются данные, но не доходят до редюсера. Не могу найти ошибку.

reducer

    const initialState = {
        name: "",
    };
    const testReducer = ( state = initialState, action) => {
        console.log(action.type);
        switch (action.type) {
            case "TEST":
                return { ...state, ...action.payload };
            default:
                return { ...state };
        }
    };
    
    export default testReducer;

action

    function setTest(test) {
        console.log(test);
        return {
            type: "TEST",
            payload: test,
        };
    }
    export default setTest;

component

    import React, { useState } from "react";
    import { connect } from "react-redux";
    
    import setTest from "./redux/action/setTest";
    
    function Test() {
        const [test, newTest] = useState("");
    
        const update = (e) => {
            newTest(e.target.value);
        };
        const click = () => {
            setTest(test);
        };
        return (
            <div>
                <input value={test} name="test" onChange={update} />
                <button onClick={click}>Click</button>
            </div>
        );
    }
    
    const mapDispatchToProps = (dispatch) => ({
        setTest: (test) => dispatch(setTest(test)),
    });
    
    export default connect(null, mapDispatchToProps)(Test);

P.S. index.js обернут в провайдер

1 ответ 1

1

Из названия метода mapDispatchToProps следует, что переданные ему методы добавляются к свойствам компонента, но у вас они игнорируются. Нужно добавить обращение к свойствам компонента при вызове dispatchTest (я переименовал setTest из-за совпадения с экшеном):

    import React, { useState } from "react";
    import { connect } from "react-redux";
    
    import setTest from "./redux/action/setTest";

    function Test(props) { // это раз
        const [test, newTest] = useState("");
    
        const update = (e) => {
            newTest(e.target.value);
        };
        const click = () => {
            props.dispatchTest(test); // а это два
        };
        return (
            <div>
                <input value={test} name="test" onChange={update} />
                <button onClick={click}>Click</button>
            </div>
        );
    }

    const mapDispatchToProps = (dispatch) => ({
        dispatchTest: (test) => dispatch(setTest(test)),
    });
    
    export default connect(null, mapDispatchToProps)(Test);

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.