时间戳

首页 > 解决方案 > Redux 状态已更改，但组件 props 未更新

react-redux - Redux 状态已更改，但组件 props 未更新

问题描述

我正在使用 redux 来控制具有布尔状态的 Ant Design Modal 组件。基本上它有一个按钮来调度动作来改变状态，组件将读取状态值。

状态已正确更改，但组件道具值未相应更新。不知道为什么它不工作。

我在 reducer 中尝试了不同的方法，比如创建一个新的布尔对象以避免改变状态，但没有运气。

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

我希望可见性道具myModal.js会在单击true签名按钮时出现myModalContainer.js，但它会一直显示false。

任何帮助，将不胜感激。谢谢！

标签： react-reduxantd

解决方案

经过大量研究和试验，事实证明我的代码没有问题..

它无法按预期工作的原因是redux和react-redux版本有关。将依赖版本切换package.json回 redux 官方教程使用的版本后，应用程序运行没有任何问题。

如果有人遇到同样的问题，这是我现在用于我的应用程序的版本npm：

redux: ^3.5.2
react-redux: ^5.0.7

更新：

刚刚发现问题的原因来自旧版本模块和新版本模块之间的冲突。

因此，通过将所有依赖项更新package.json到最新版本，应用程序也可以顺利运行。没有必要降级react-redux和redux。

推荐阅读