Question

点击登录按钮
Auth的行动称为
减速机名为
连接mapDispatchToProps称为
但是，它没有重新绘制

我遇到了麻烦，因为没有调用React.Component 5的render方法，也没有执行重绘。

阅读本文后，我认为使用Render.Component的Object.assign应该调用Renact of React.Component。

但它不起作用。哪里错了？

app.js

import { connect } from 'react-redux'
import App from '../components/app'

function mapStateToProps(state){
    return {login: state.login}
}

function mapDispatchToProps(dispatch) {
    return {
        dispatch
    };
}

export default connect(mapStateToProps,mapDispatchToProps)(App);

组件/ app.js

import React from 'react'
import { Link } from 'react-router'
import { auth } from '../actions/auth'
export default class App extends React.Component {
    render() {
        const { dispatch } = this.props;
        return (
            <div className="columns is-gapless">
                <div className="column is-10 content">
                    <div className="content-body">
                        <div className="has-text-right">
                            {(this.props.login)?"TRUE":"FALSE"}
                            <button className="button is-primary" onClick={()=>dispatch(auth("test@test.com","aaaa"))}>login</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

操作/ auth.js

import {constant} from './constant';
export function auth(email,password) {
    return {
        type: constant.ACTION.AUTH,
        email: email,
        password:password
    }
}

减速器

import {constant} from './actions/constant';
const initialState = {
    login: false
};

export default function reducersIndex(state = initialState, action) {
    console.log("reducers");
    if (typeof state === 'undefined') {
        return 0
    }
    switch (action.type) {
        case constant.ACTION.AUTH:
            return Object.assign({}, state,{
                login:!state.login
            });
        default:
            return state
    }
}

Answer 1

您的州包含属性login，该属性在您的reducer中设置。在您的组件中，您还要检查this.props.login。

但是，在mapStateToProps中，您将state.state映射到道具state，离开this.props.login === undefined。因此，{(this.props.login)?"TRUE":"FALSE"}将始终评估为"FALSE"。

要解决此问题，请将您所在州的login映射到容器中的道具login：

function mapStateToProps(state){
    return {login: state.login}
}

如果更改商店值，Redux不会重绘

1 个答案: