减速器在React Redux中不更新状态

时间:2019-02-25 08:16:24

标签: javascript reactjs redux react-redux redux-form

我正在尝试使用react-redux来更新状态,但是状态尚未更新。 新价值即将来临 “如果(action.type ==='SET_LOGGED_IN')” 在reducer中,但不将isLoggedIn更新为true。 哪里错了? find the code

Login.js

function handleLoginClick(username, password, e) {
    e.preventDefault();

    post('/createUser', { username, password })
        .then(({ status }) => {
            if (status === 200) {
                console.log(this.props);
                this.props.setLoggedIn(true);
                this.props.history.push('/');
            }else{
                this.props.setLoggedIn(false);

            }
        })
        .catch(error => {
        .........
        })
}
..................
const mapStateToProps = state => {
    return {isLoggedIn : state.reducer.isLoggedIn};};
const mapDispatchToProps = dispatch => {
    return {setLoggedIn : (value) => dispatch({type: 'SET_LOGGED_IN', value: value}),}};

export default compose(
    withStyles(styles),
    withRouter,
    connect(mapStateToProps, mapDispatchToProps)
)(NewLogin);

reducer.js

import { combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form';

const initialStates = {
    isLoggedIn : false
};

const reducers = combineReducers({
    reducer : (state = initialStates, action) => {
        //console.log(action);
        if (action.type === 'SET_LOGGED_IN') {
            //console.log(action);
            return {
                ...state,
                isLoggedIn: action.value
            };
        }
        return state;
    },

        form: reduxFormReducer, // mounted under "form"
});

export default reducers;

4 个答案:

答案 0 :(得分:0)

认为您的mapStateToProps可能有问题。尝试访问您的isLoggedIn状态,例如:

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

答案 1 :(得分:0)

-修复了错误-

在我的代码中,状态已正确更新。访问时,我使用了state.isLoggedIn(未定义)。我从state.reducer.isLoggedIn替换了它。 现在一切正常。

谢谢@UmairFarooq,@VladimirBogomolov和所有评论并尝试修复它的人。

const mapStateToProps = state => {
    return {
      isLoggedIn : state.reducer.isLoggedIn
    };
};

答案 2 :(得分:-1)

使用componentwillupdate()来控制何时更新 返回false表示不更新

答案 3 :(得分:-1)

您应该以不同的方式调用调度:

const mapDispatchToProps = (dispatch, val) => {
  return {
    setLoggedIn : (val) => dispatch({ type: 'SET_LOGGED_IN', value: val }),
  }
};

尝试一下,它应该对您有用。