我对 React Redux 间隔操作有疑问。它使用 Axios 以 20 秒的间隔调用 Twitch api 并更新 redux 状态。Redux 状态每次都成功更新，但组件不刷新。我必须采取一些其他措施来刷新组件。怎么了？
店铺
const createReduxStore = (history, initialState = {}) => {
// ======================================================
// Middleware Configuration
// ======================================================
const middleware = [routerMiddleware(history), thunk];
// ======================================================
// Store Enhancers
// ======================================================
const enhancers = [];
let composeEnhancers = compose;
if (process.env.APP_DEBUG) {
if (typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ === 'function') {
composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
}
}
// ======================================================
// Store Instantiation and HMR Setup
// ======================================================
return createInjectStore(
rootReducer,
composeEnhancers(
applyMiddleware(...middleware),
...enhancers
)
);
};
零件
class LiveBarItems extends React.Component {
componentDidMount() {
this.props.dispatch(this.props.actions.initTwitch.bind(this));
}
render() {
const { live, groups, dispatch, actions } = this.props;
return (
..............
)
}
}
const mapStateToProps = (state) => ({
isAuthenticated : state.auth.get('isAuthenticated'),
user : state.user,
groups : state.user ? state.user.get('groups') : null,
live : state.live,
});
export default connect(mapStateToProps, dispatchToProps)(LiveBarItems);
行动
export function initTwitch() {
return (dispatch, getState) => {
dispatch(twitchGetStreams());
setInterval(() => {
dispatch(twitchGetStreams());
}, twitchConstatns.TWITCH_GET_STREAMS_REFRESH_TIME);
}
}
export function twitchGetStreams() {
return (dispatch, getState) => {
const streams = getTwitchStreamsFromStore(getState().user);
let groups = {};
if (!streams) {
return {
type: twitchConstatns.TWITCH_CANCEL
}
}
return axios.get(twitchConstatns.TWITCH_API_URL + '/streams', {
withCredentials: false,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Client-ID': process.env.TWITCH_API_KEY,
},
params: {
channel: streams,
}
})
.then(checkHttpStatus)
.then(response => {
try {
groups = processTwitchGetStreams(response.data, getState().user, dispatch);
} catch (e) {
}
})
.then(() => {
dispatch(userActions.userSet({
'groups': groups
}))
})
.catch(error => {
})
}
}
dispatch(userActions.userSet) 成功改变了我在 redux 开发工具中看到的 redux 状态，它改变了我组件中的 props state.user 和 state.live。怎么了？应用程序中的其他非间隔操作效果很好。此代码示例是应用程序的一部分，如果需要其他详细信息，请告诉我，我会分享。
更新
这是我的userReducer：
import { Map } from "immutable";
import * as userConstants from '../constants/userConstants';
import {createReducer} from '../utils';
const initialState = Map({
login: null,
email: null,
groups: null,
settings: null,
});
export default createReducer(initialState, {
[userConstants.USER_SET]: (state, payload) => {
return state.merge(Map(
payload
));
},
[userConstants.USER_CLEAR]: (state, payload) => {
return state.merge(Map({
'login': null,
'email': null,
'groups': null,
'settings': null,
}));
}
});
创建减速器：
export function createReducer(initialState, reducerMap) {
return (state = initialState, action) => {
const reducer = reducerMap[action.type];
return reducer
? reducer(state, action.payload)
: state;
};
}
用户集
export function userSet(user) {
return {
type: userConstants.USER_SET,
payload: user,
}
}
我的 live reducer 有一组来自 user.get('groups") 所以如果我在 userReducer 中更新它，那么 liveReducer 也会更新。