Состояние Redux изменилось, но реквизиты компонента не обновляются - PullRequest
Новая
       13

Состояние Redux изменилось, но реквизиты компонента не обновляются

1 голос
/ 10 апреля 2019

Я использую избыточность для управления модальным компонентом Ant Design с логическим состоянием. По сути, он имеет кнопку, которая отправляет действие для изменения состояния, и компонент считывает значение состояния.

Состояние изменено правильно, но значение реквизита компонента не обновляется соответствующим образом. Не уверен, почему это не работает.

Я пробовал разные подходы в редукторе, такие как создание нового логического объекта, чтобы избежать изменения состояния, но не повезло.

myAction.js 

export const modalVisibilityOn = () => ({
    type: 'MODAL_ON'
})

export const modalVisibilityOff = () => ({
    type: 'MODAL_OFF'
})

myReducer.js 

const modalVisibility = (state = false, action) => {
    switch (action.type){
        case 'MODAL_ON':
            return true
        case 'MODAL_OFF':
            return false
        default:
            return state
    }
}

export default modalVisibility

myRootReducer.js 

import { combineReducers } from 'redux'
import modalVisibility from './signPage/myReducer'

export default combineReducers({
    modalVisibility
})

myModal.js 

import React from "react";
import PropTypes from 'prop-types'
import { Modal, Input } from 'antd';

import { connect } from 'react-redux'
import { modalVisibilityOff } from '../../reducers/signPage/myAction'

class myModal extends React.Component {

    render() {
    const { visibility, handleOk, handleCancel } = this.props;

    myModal.propTypes = {
      visibility: PropTypes.bool.isRequired,
      handleOk: PropTypes.func.isRequired,
      handleCancel: PropTypes.func.isRequired,
        }

        return (
            <Modal
              title="Sign"
              visible={visibility}
              onOk={handleOk}
              onCancel={handleCancel}
              closable={false}
            >
              <p>Please input your staff ID</p>
              <Input addonBefore="Staff ID" />
            </Modal>
        );
    }
}

const mapStateToProps = state => {
  return {
    visibility: state.modalVisibility
  }
}

const mapDispatchToProps = dispatch => ({
  handleOk: () => dispatch(modalVisibilityOff()),
  handleCancel: () => dispatch(modalVisibilityOff()),
})

export default connect(
  mapStateToProps,mapDispatchToProps
)(myModal)

myModalContainer.js 

import React from "react";
import { Input } from "antd";
import { Button } from 'antd';
import { Row, Col } from 'antd';
import { Typography } from 'antd';

import PropTypes from 'prop-types'
import myModal from '../../dialogs/signPage/myModal';

import { connect } from 'react-redux'
import { modalVisibilityOn } from '../../reducers/signPage/myAction'

class myModalContainer extends React.Component {

  render() {
        const { Title } = Typography;

        const { onClick } = this.props;

    myModalContainer.propTypes = {
      onClick: PropTypes.func.isRequired
        }

    return (
            <div className="search-container-parent">
                <Row className="search-container">
                    <Col className="search-col1" xs={24} sm={12}>
                        <Input size="large" style={{width:'40%'}} id="issueReturnNo" placeholder="QR code here"/>
                        <Button size="large">SEARCH</Button>
                        <div className="signBtn-div">
                            <Button size="large" type="primary" onClick={onClick} >SIGN</Button>
                            <myModal />
                        </div>
                    </Col>
                    <Col xs={24} sm={12}>
                        <Title className="issueLog-title" level={3} style={{color:"#F08080"}}>Issue</Title>
                    </Col>
                </Row>
            </div>
    );
  }
}

    const mapDispatchToProps = dispatch => ({
        onClick: () => dispatch(modalVisibilityOn())
    })

  export default connect(
    null, mapDispatchToProps
  )(myModalContainer);

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { createStore } from 'redux'
import { Provider } from 'react-redux'
import rootReducer from './myRootReducer'

const store = createStore(rootReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
 document.getElementById('root'));
serviceWorker.unregister();

Я ожидаю, что при 1025 * значение параметра видимости будет true, когда нажата кнопка знака на myModalContainer.js, но она продолжает показывать false.

Любая помощь будет оценена. Спасибо!

1 Ответ

0 голосов
/ 11 апреля 2019

После многих исследований и испытаний выяснилось, что у моего кода нет проблем.

Причина, по которой он не работает должным образом, связана с версиями redux и react-redux.После переключения package.json версий зависимостей обратно на ту, которую используют официальные учебники Redx, приложение работает без проблем.

В случае, если у кого-то возникла такая же проблема, вот версию, которую я сейчас использую для своегоприложение в npm: 

redux: ^3.5.2
react-redux: ^5.0.7

Обновление:

Только что выяснилось, что причиной проблемы являются конфликты между модулями более старой версии и модулями более новой версии.

Поэтому, обновляя все зависимости в package.json до последней версии, приложение также может работать без сбоев.Нет необходимости понижать react-redux и redux.

...