Почему редуктор не может обновить магазин?

Question

Мне кажется, что мои компонент, создатель действий и редуктор настроены правильно, но по какой-то причине мой магазин не обновляется, когда я перемещаю ползунок.

Это мой файл App.js без импорта

class App extends React.Component {
  state = {
    value: 100,
  };

  handleChange = (event, value) => {
    this.setState({ value });
    console.log(value)
    this.props.dispatch(PriceFilter(value))
  };

  render() {
    console.log(this.props)

    return (
      <div style={styles.root}>
        <Slider
          value={this.state.value}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return { price: state.reducers }
}

export default connect(mapStateToProps)(App)

Мое действие очень простое

export const PriceFilter = (price) => ({
    type: 'PRICE_FILTER',
    price: price
})

Мой редуктор также очень прост:

const initialState = {
    price: 10000
}

const priceReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'PRICE_FILTER':
            return {
                ...state,
                price: action.price
            }
        default:
            return state
    }
}

export default priceReducer

Кто-нибудь знает, что я могу делать неправильно?

Answer 1

проверьте, приходит ваше состояние redux или нет console. Я думаю, что если вы не использовали combineReducers метод в редуксе, тогда ваш магазин редуксов получит только state.

const mapStateToProps = (state) => {
  console.log(state) // check redux store
  return { price: state.reducers }
}

Answer 2

Мне нужно было изменить mapStateToProps на это:

const mapStateToProps = (state) => {
return { price: state.price }
}