mapDispatchToProp не работает как объект - PullRequest
Новая
       65

mapDispatchToProp не работает как объект

0 голосов
/ 05 августа 2020

mapDispatchToProp не работает при использовании в качестве объекта. Но когда я использую его классическим способом, явно возвращая отправку, он работает нормально. Код выглядит следующим образом: 


const incrementValue = () => ({
    type: 'INCREMENT',
});

const decrementValue = () => ({
    type: 'DECREMENT',
});

const reducer = (state = initState, action) => {

    if(action.type === 'INCREMENT') {
        return {
            count: state.count + 1,
        };
    }
    if(action.type === 'DECREMENT') {
        return {
            count: state.count - 1,
        };
    }

    return state;
}

const store = createStore(reducer);

class Counter extends Component {
    render() {
        const {count, increment, decrement} = this.props;
        console.log(count, increment, decrement);
        return(
            <div className="counter">
                <p>{count}</p>
                <div className="controls">
                    <button onClick={increment}>Increment</button>
                    <button onClick={decrement}>Decrement</button>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return state;
};

const mapDispatchToProp = (dispatch) => {
    return {
        increment() {
            dispatch(incrementValue());
        },
        
        decrement() {
            dispatch(decrementValue());
        }
    };
};

const dispatchActions = {
    incrementValue,
    decrementValue
}; // Not Working // mapDispatchToProps as an object

const CounterContainer = connect(mapStateToProps, mapDispatchToProp)(Counter);

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

Когда я использую объект dispatchActions во втором параметре вместо mapDispatchToProp, он работает не так, как ожидалось. Что случилось? Изменить: я инициализировал счет следующим образом 

const initState = {
    count: 0,
};

Ответы [ 2 ]

0 голосов
/ 05 августа 2020

Обновлено: 2

ВАШ КОД ПРАВИЛЬНЫЙ Все правильно в вашем коде, который вы пропустили

вам необходимо добавить строку ниже initState в вашем коде 

let initState = {
  count: 0
}
const reducer = (state = initState, action) => {

проверить рабочую ссылку на основе вашего кода https://repl.it/@GopalaKrishnan3 / Create-React-App

URL демонстрационного сайта https://create-react-app--gopalakrishnan3.repl.co/

enter image description here

Updated 3

Here also your code is working you have to changed actionCreater names properly while getting through this.props. like below,

    render() {
        const {count, incrementValue, decrementValue} = this.props;
        return(
             {count}  Увеличение  Уменьшение   )}} const mapStateToProps = (состояние) => {return state; }; // const mapDispatchToProp = (dispatch) => {// return {// increment () {dispatch (incrementValue ()); }, // декремент () {отправка (декрементЗначение ()); } //}; //}; const dispatchActions = {incrementValue, // вам нужно изменить это имя при получении реквизита DecmentValue // вам нужно изменить это имя при получении реквизита}; const CounterContainer = connect (mapStateToProps, dispatchActions) (счетчик);

Проверить это новые изображения

0 голосов
/ 05 августа 2020

Какой смысл добавлять дополнительные оболочки в объект mapDispatchToProp? 

const mapDispatchToProp = () => {
  incrementValue,
  decrementValue
};

И вызывать это в ваших компонентах, например, this.props.incrementValue. Или вы можете сопоставить их, как хотите.

...