Question

我遇到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 dev工具中看到它，它改变了state.user和state.live，它们是我组件中的props。怎么了？ app中的其他非间隔操作效果很好。此代码示例是应用程序的一部分，如果需要其他一些详细信息，请告诉我我将分享的内容。

更新

这是我的 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,
        }));
    }
});

创建Reducer：

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也会更新。

Answer 1

我们可以看到你的reducer以及它如何处理userActions.userSet（{'groups'：groups}）的动作吗？如果不使用不可变对象更新状态，则会发生常见的React / Redux错误（state.user.get（'groups'）可能指向同一地址，而您的组件不知道树已更改）。 / p>

Answer 2

如果我理解了这一点，你只需要componentWillReceiveProps（）来重新渲染你的组件。在这里阅读更多相关信息： https://reactjs.org/docs/react-component.html#componentwillreceiveprops

Answer 3

我认为问题出在mapStateToProps中。您的商店是不可变的，但您正在访问它，就好像它是一个普通的JS对象。这将产生空值，并且由于道具似乎不会改变，因此它不会重新渲染。

React Redux间隔操作不会刷新组件

3 个答案: