контролируемый диапазон-ползунок в реакции с редуксом

Question

Я изучаю избыточность с помощью реакции и пытаюсь создать приложение, в котором у меня есть бегунок диапазона, значение которого определяет, сколько компонентов 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
    }
}

я также попытался вызвать метод handleChange с функцией стрелки при изменении, как я сделал бы с управляемым компонентом реакции без избыточности, но это не имеет значения

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

Вот так должен выглядеть ваш файл индекса. 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 };
};

Это простое исправление. Когда ваше приложение станет больше, вам понадобится больше редукторов, и поэтому лучше сохранить для этого отдельный файл.