React-Redux: редуктор только возвращает исходное состояние

Question

Когда я использую в своем приложении «Реак» избыточность, редуктор просто возвращает мне исходное состояние. Здесь всегда возвращается ложное значение. Спасибо за ваш ответ.

[ОБНОВЛЕНИЕ]: я произнес: *

к этому:

 let newState = {...state}

но также редуктор вернул false

это мой редуктор:

 const initialState = {
      modalVisible: false
    };
    function modalReducer(state = initialState, action) {
      let newState = {...state};
      switch (action.type) {
        case "SHOW":
          newState.modalVisible = true;
          console.log("Show!");
          break;
        case "HIDE":
          newState.modalVisible = false;
          console.log("Hide!");
          break;
      }
      return newState;
    }

export default modalReducer;

и это мой компонент (компонент Svg Viewer)

import React from "react";

import { connect } from "react-redux";

const SvgViewer = ({
  nodesData,
  svgFilePath,
  modalVisible,
  onModalShow,
  onModalHide
}) => {

  const clickHandler = () => {
    onModalShow();
    console.log(modalVisible); //return false
    onModalHide();
    console.log(modalVisible);
  };

  return (
    <div className="unit-schema-container1" key={svgFilePath}>
      <object id="svgobject" type="image/svg+xml" data={svgFilePath}></object>
      <button onClick={clickHandler}></button>
    </div>
  );
};

const mapStateToProps = state => {
  return { modalVisible: state.modalVisible };
};

const mapDispatchToProps = dispatch => {
  return {
    onModalShow: () => {
      dispatch({ type: "SHOW" });
    },
    onModalHide: () => {
      dispatch({ type: "HIDE" });
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(SvgViewer);

Answer 1

Вы должны попробовать использовать это. Его легче читать и использует лучшие практики

const initialState = {
  modalVisible: false
};

function modalReducer(state = initialState, action) {
  switch (action.type) {
    case "SHOW":
      return {...state, modalVisible: true }
    case "HIDE":
      return {...state, modalVisible: false }
    default:
      return state
  }
}

Answer 2

Я думаю, что проблема в функции mapStateToprops, пожалуйста, опубликуйте ваш основной редуктор, попробуйте отредактировать вашу mapStateToProps

const mapStateToProps = state => {
  return { modalVisible: state.modalVisible.modalVisible  };
};

Answer 3

вы должны вернуть новый объект состояния

let newState = {...state}