React-redux, connect函数不使用新数据更新状态
React-redux, connect function does not update the state with the new data
我使用Redux
作为Flux
的替代品,React
作为视图层。我的应用程序的React
和Redux
与react-redux
connect()
方法绑定。当运行应用程序时,它会在组件挂载时调度操作,redux返回正确的状态。但是,redux-logger
在控制台中记录存储已经用新状态更新的日志,在组件中检查this.props.session
时,它仍然显示旧状态。我猜我没有正确使用connect
方法,但是我也无法定义这个问题。有人知道是怎么回事吗?
容器/App
'use strict';
import React from 'react';
import {connect} from 'react-redux';
import {fetchUserSession} from 'actions/SessionActions';
class App extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
const {dispatch, session} = this.props;
dispatch(fetchUserSession());
console.log(session);
// logs:
// Object {currentUserId: null, errorMessage: null, isSessionValid: null}
// store is bound to window, and the initial state is ImmutabeJS object
console.log(window.store.getState().session.toJS());
// logs:
// Object {currentUserId: null, errorMessage: null, isSessionValid: false}
// as you might noticed the isSessionValid is changed to false
}
render() {
// html here
}
}
function mapStateToProps(state){
return {
session: state.session.toJS()
};
}
export default connect(mapStateToProps)(App);
行动/Actions.js
'use strict';
import fetch from 'isomorphic-fetch';
export const SESSION_REQUEST = 'SESSION_REQUEST';
export const SESSION_SUCCESS = 'SESSION_SUCCESS';
export function requestSession() {
return {
type: SESSION_REQUEST
};
}
export function receiveSession(user) {
return {
type: SESSION_REQUEST,
user
};
}
export function fetchUserSession() {
return dispatch => {
dispatch(requestSession());
return fetch(`http://localhost:5000/session`)
.then((response) => {
if (response.status === 404) {
dispatch(raiseSessionFailure(response));
}
return response.json();
})
.then(userData => dispatch(receiveSession(userData)));
};
}
异径接头/SessionReducer.js
'use strict';
import {fromJS} from 'immutable';
// UPDATE!!!
// here is the initial state
const initialState = fromJS({
currentUserId: null,
errorMessage: null,
isSessionValid: null
});
function sessionReducer(state = initialState, action) {
switch (action.type) {
case 'SESSION_REQUEST':
return state.update('isSessionValid', () => false);
case 'SESSION_SUCCESS':
console.log('Reducer: SESSION_SUCCESS');
return state;
case 'SESSION_FAILURE':
console.log('Reducer: SESSION_FAILURE');
return state;
default:
return state;
}
}
export default sessionReducer;
异径接头/RootReducer
'use strict';
import {combineReducers} from 'redux';
import sessionReducer from 'reducers/SessionReducer';
const rootReducer = combineReducers({
session: sessionReducer
});
export default rootReducer;
问题是session
变量从props
和存储中被记录的方式。当您将操作分派到更新状态时,它将同步更新存储,这就是为什么您在直接记录它时看到存储已被更新的原因。但是,React -redux将无法更新props,直到对componentWillMount
的调用完成,并且React有机会赶上并呈现具有新状态的组件。如果您调度componentWillMount
中的动作并稍后记录session
道具,您将看到它已经更改以反映动作。
看起来你不改变状态在减速机的动作处理程序。只有case
而不是return state
代码是state.update('isSessionValid', () => false)
-它返回什么?如果它是与前一个状态相同的对象,redux不会改变任何东西,因为不可变性约定。
相关文章:
- 如何在具有某些 UI 视图的状态中管理工厂单个请求数据
- 来自应用程序状态的Jquery数据表源
- 基于javascript中的状态字段对动态行数据进行动态着色
- 美国地图插件,具有状态数据/悬停功能的新按钮
- 如何在状态输入ui路由器时立即显示模板,然后当承诺被解决时显示数据
- 无限滚动,动态数据按上次修改状态排序
- 如何将状态对象/数据传递给(异步)ajax 回调
- 当我想对redux容器中的数据进行排序或过滤时,我该如何查看它的状态
- 将状态的 URL 数据获取到模板中
- 使选项卡处于活动/非活动状态未显示正确的数据
- 如何使用Angular UI Router解析所有状态的数据
- 谷歌图表LineGraph切换数据表和维护状态
- 如何处理需要子组件状态的Meteor数据
- 如何在类似Om的不可变应用程序状态下对关系数据进行建模
- Javascript:在表单中输入数据时,提交按钮不处于活动状态
- 反应.js - 处于异步数据状态的深层对象不起作用
- 有两个html页面.当我从下一页恢复到第一页时,我希望保存第一页的数据状态
- 如何选择要在jquery函数中使用的数据状态
- 选择下一个列表组并更改数据状态
- 通过javascript检测媒体查询并应用适当的数据状态