Question

在我看来，我的组件，动作创建者和reducer都正确设置，但是由于某些原因，移动滑块时我的商店没有更新。

这是我的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状态是否即将到来。我认为，如果您没有在Redux中使用combineReducers方法，而您的Redux存储仅由state提供。

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

Answer 2

我需要将mapStateToProps更改为此：

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

为什么reducer无法更新商店？

2 个答案: