Javascript react with redux中的受控范围滑块组件

我正在学习react的redux，并尝试创建一个应用程序，其中我有一个范围滑块，其值指示将在屏幕上呈现多少框组件

我试图使范围滑块成为受控组件，但无法使其更改存储。我没有错

组成部分：

import React from 'react';
import { connect } from 'react-redux';
import { setBoxNumber } from '../actions/actions';

const Slider = ({ boxNumber, handleChange }) => {

    return(
        <div>
            <div>
                {boxNumber}
            </div>
            <div>
                <input 
                    onChange={handleChange}
                    value={boxNumber}
                    type="range" 
                    min="12" 
                    max="480" 
                />
            </div>
        </div>
    )
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    handleChange: (event) => dispatch(setBoxNumber(event.target.value))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Slider);

行动：

export const setBoxNumber = (number) => {
    return {
        type: 'SET_BOX_NUMBER',
        payload: number
    }
}

---

我还尝试在更改时使用箭头函数调用handleChange方法，就像我在没有redux的情况下使用受控react组件一样，但这没有什么区别，我认为您的减速器配置不正确。您可以像这样传递变量

initialState

中的所有初始状态

//reducer.js
import { combineReducers } from "redux";

const initialState = {
  boxNumber: 40,
};

const boxReducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_BOX_NUMBER":
      return {
        ...state,
        boxNumber: action.payload,
      };
    default:
      return state;
  }
};

export default combineReducers({
  boxReducer,
});

以下是index.js文件的外观：

//index.js
import React from "react";
import ReactDOM from "react-dom";
import Slider from "./Slider.js";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "./redux/reducer";

const store = createStore(reducer);

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

---

这是一个简单的解决方案。随着你的应用程序越来越大，你将需要更多的简化程序，因此最好为它保留一个单独的文件

尝试此操作时，我得到错误：```错误：对象作为React子对象无效（找到：具有键{boxNumber}的对象）。如果要呈现子对象集合，请改用数组据我所知，我在网上找不到与我的案件有关的东西，有什么想法吗？有。我发现你的商店也没有正确配置。所以我已经更新了代码。非常感谢！这就成功了。如果我得到的正确，值基本上保存在state对象内的reducer对象中？所以，对于我想要抓住的每一个不同的状态，我需要“接触”到状态内部的分离减速器？

//index.js
import React from "react";
import ReactDOM from "react-dom";
import Slider from "./Slider.js";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "./redux/reducer";

const store = createStore(reducer);

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

//Slider.js
const mapStateToProps = (state) => {
  return { boxNumber: state.boxReducer.boxNumber };
};