reducer 不更新 react redux 中的状态
reducer does not update state in react redux
我正在尝试使用 react-redux 更新状态,但状态未更新。
新的价值正在到来
"if (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;
使用 componentwillupdate() 来控制何时更新
return false 不更新
你应该以不同的方式调用调度:
const mapDispatchToProps = (dispatch, val) => {
return {
setLoggedIn : (val) => dispatch({ type: 'SET_LOGGED_IN', value: val }),
}
};
尝试一下,它应该适合你。
认为您的 mapStateToProps
可能有问题。尝试访问您的 isLoggedIn 状态,例如:
const mapStateToProps = state => {
return {isLoggedIn : state.isLoggedIn};};
-修正错误-
在我的代码中,状态更新正确。当我访问时,我使用了未定义的 state.isLoggedIn 。我从 state.reducer.isLoggedIn 替换了它。
现在一切正常。
感谢@UmairFarooq、@VladimirBogomolov 以及所有发表评论并尝试修复它的人。
const mapStateToProps = state => {
return {
isLoggedIn : state.reducer.isLoggedIn
};
};
我正在尝试使用 react-redux 更新状态,但状态未更新。 新的价值正在到来 "if (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;
使用 componentwillupdate() 来控制何时更新 return false 不更新
你应该以不同的方式调用调度:
const mapDispatchToProps = (dispatch, val) => {
return {
setLoggedIn : (val) => dispatch({ type: 'SET_LOGGED_IN', value: val }),
}
};
尝试一下,它应该适合你。
认为您的 mapStateToProps
可能有问题。尝试访问您的 isLoggedIn 状态,例如:
const mapStateToProps = state => {
return {isLoggedIn : state.isLoggedIn};};
-修正错误-
在我的代码中,状态更新正确。当我访问时,我使用了未定义的 state.isLoggedIn 。我从 state.reducer.isLoggedIn 替换了它。 现在一切正常。
感谢@UmairFarooq、@VladimirBogomolov 以及所有发表评论并尝试修复它的人。
const mapStateToProps = state => {
return {
isLoggedIn : state.reducer.isLoggedIn
};
};