与 redux 反应的受控范围滑块组件

Question

我正在学习 redux 并尝试创建一个应用程序，其中我有一个范围滑块，其值决定了屏幕上将呈现多少个 Box 组件。

我正在尝试使范围滑块成为受控组件，但不能使其更改商店。 我没有收到任何错误。

组件：

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);

减速机：

import { combineReducers } from 'redux';

export const boxNumberReducer = (boxNumber = 40, action) => {
    switch(action.payload) {
        case 'SET_BOX_NUMBER':
            return action.payload;
        default:
            return boxNumber;
    }
}

export default combineReducers({
    boxNumber: boxNumberReducer
})

那个行动：

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

我还尝试在更改时使用箭头 function 调用 handleChange 方法，就像我对没有 redux 的受控反应组件所做的那样，但它没有任何区别

Answer 1

我认为您的减速器配置不正确。 您可以像这样在变量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")
);

您需要更新mapStateToProps中的Slider.js以访问减速器中的状态。

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

这是一个简单的修复。 随着您的应用程序变得越来越大，您将需要更多的减速器，因此最好为此保留一个单独的文件。