0

Сейчас при клике на press есть диспатч который увеличивает счетчик и так же есть reset который обнуляет счетчик. Проблема, что reset работает, но при дальнейшем клике на press счет начинается с того значения которое было обнулено, то есть не с нуля

 const initialState = {
 counter:0,
 }

 const store = createStore(reduce);

    const reduce = (state = initialState, action) => {
        switch(action.type) {
            case 'ACTION_CHANGE_COUNTER':
            return {...state, counter: ++action.payload };
            case 'RESET_COUNTER': 
            return {...state, counter: action.payload};
        }
        return state;   
    }

const ACTION_CHANGE_COUNTER = 'ACTION_CHANGE_COUNTER';
const RESET_COUNTER = 'RESET_COUNTER';

const changeCounter = {
    type: ACTION_CHANGE_COUNTER,
    payload: initialState.counter
}

const resetCounter = {
    type: RESET_COUNTER,
    payload: 0
}


class MainComponent extends React.Component {
    constructor(props) {
        super(props);
        this.press = this.press.bind(this);
        this.reset = this.reset.bind(this);
      }
    press() {
            store.dispatch(changeCounter)       
    }
    reset() {
           store.dispatch(resetCounter) // reset срабатывает и на экране 0, но потом счет начинается не с нуля а с числа где был резет 
    }
    render() {
        return <div>
            {
                this.props.counter
            }
        <button onClick={this.press}>ok</button>
        <button onClick={this.reset}>reset</button>
    </div>
    }
}

function mapStateToProps (state) {
    console.log(state)
    return {
        counter: state.counter,
    }
}
const WrapMainComponent = connect(mapStateToProps)(MainComponent);


ReactDOM.render(<Provider store={store}><WrapMainComponent/></Provider>
    , document.getElementById('app')
)

1 ответ 1

1

Проблема в том, что вы используете один и тот же объект changeCounter, и мутируете его свойство payload в редьюсере. Так что при нажатии на OK счетчик у вас не "увеличивается на 1", а "выставляется в то значение, которое сейчас лежит в changeCounter + 1".

Самый простой фикс - переписать редьюсер так, чтобы он стал чистой функцией, и перестал что-либо мутировать. Если у вас ACTION_CHANGE_COUNTER должен именно увеличивать счетчик на 1 - то его обработка именно так и должна выглядеть:

const reduce = (state = initialState, action) => {
  switch (action.type) {
    case "ACTION_CHANGE_COUNTER":
      return { ...state, counter: state.counter + 1 };
    case "RESET_COUNTER":
      return { ...state, counter: 0 };
  }
  return state;
};

const ACTION_CHANGE_COUNTER = "ACTION_CHANGE_COUNTER";
const RESET_COUNTER = "RESET_COUNTER";

const changeCounter = {
  type: ACTION_CHANGE_COUNTER,
};

const resetCounter = {
  type: RESET_COUNTER,
};

И, возможно, стоит переименовать его в INCREMENT_COUNTER.

Если же хочется именно присылать новый Payload, то стоит использовать action creator, который будет создавать новый объект ACTION_CHANGE_COUNTER при каждом вызове. Примерно так:

const reduce = (state = initialState, action) => {
  switch (action.type) {
    case "ACTION_CHANGE_COUNTER":
      return { ...state, counter: action.payload };
    case "RESET_COUNTER":
      return { ...state, counter: 0 };
  }
  return state;
};

....

const changeCounter = (counter) => ({
  type: ACTION_CHANGE_COUNTER,
  payload: counter,
})
....

  press() {
    store.dispatch(changeCounter(this.props.counter + 1));
  }

Также можно убрать ручной вызов dispatch и прокидывать changeCounter и resetCounter через mapDispatchToProps, примерно так:

import { createStore } from "redux";
import React from "react";
import ReactDOM from "react-dom";
import { connect, Provider } from "react-redux";

const initialState = {
  counter: 0
};

const reduce = (state = initialState, action) => {
  switch (action.type) {
    case "ACTION_CHANGE_COUNTER":
      return { ...state, counter: action.payload };
    case "RESET_COUNTER":
      return { ...state, counter: 0 };
  }
  return state;
};

const ACTION_CHANGE_COUNTER = "ACTION_CHANGE_COUNTER";
const RESET_COUNTER = "RESET_COUNTER";

const changeCounter = (counter) => ({
  type: ACTION_CHANGE_COUNTER,
  payload: counter,
})

const resetCounter = () => ({
  type: RESET_COUNTER,
})

// кроме рендера ничего нет, можно заменить класс на функцию
class MainComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.counter}
        <button onClick={() => this.props.changeCounter(this.props.counter + 1)}>ok</button>
        <button onClick={this.props.resetCounter}>reset</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  console.log(state);
  return {
    counter: state.counter
  };
}

const WrapMainComponent = connect(mapStateToProps, 
  { changeCounter, resetCounter }
  )(MainComponent);

const store = createStore(reduce);

ReactDOM.render(
  <Provider store={store}>
    <WrapMainComponent />
  </Provider>,
  document.getElementById("app")
);
2
  • Спасибо за ответ! скажите почему нельзя делать мутацию в самом action const changeCounter = (counter) => ({ type: ACTION_CHANGE_COUNTER, payload: ++counter, // вот так }) press() { store.dispatch(changeCounter(this.props.counter )); }
    – Кларк
    Commented 23 апр. 2019 в 12:43
  • @Кларк в таком варианте - можно, почему бы и нет - правда, это мутация параметра, которая ни на что не влияет - вообще не стоит писать ++, если вы не собираетесь дальше использовать увеличенное значение counter. Если надо написать "на один больше, чем counter" - пишите counter + 1 - будет меньше приключений.
    – user177221
    Commented 23 апр. 2019 в 13:24

Ваш ответ

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

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