reactjs - Redux 存储更新但没有重新渲染

Question

嗨，这里的第一篇文章，所以请和我一起轻松。我是 redux 的新手，想知道为什么我的商店成功更新后我没有重新渲染。

这是我的减速机

const initialState = {
    pending: false,
    loadPlanning: [],
    error: null
}

export const loadPlanningReducer = (state = initialState, action) => {
    if (action.type === INITIALISE_LOAD_PLANNING_PENDING) {
        return {
            ...state,
            pending: true
        }
    }
    if (action.type === INITIALISE_LOAD_PLANNING_SUCCESS) {
        console.log('updating state');
        return Object.assign({}, state, {
            ...state,
            pending: false,
            loadPlanning: state.loadPlanning.concat(action.loadPlanning.items)
        });
    }
    if (action.type === INITIALISE_LOAD_PLANNING_ERROR) {
        return {
            ...state,
            pending: false,
            error: action.error
        }
    }
    return state;
}
export default loadPlanningReducer;

export const getLoadPlanning = (state) => { console.log('reducer state',state); return state.loadPlanning };
export const getLoadPlanningPending = (state) => state.pending;
export const getLoadPlanningError = (state) => state.error;

视图看起来像

const mapStateToProps = (state, ownProps) => ({
    error: getLoadPlanningError(state),
    loadPlanning: getLoadPlanning(state),
    pending: getLoadPlanningPending(state),
    options: state.options.options,
    option: state.options.currentOption,
    oidc: state.oidc
})

const mapDispatchToProps = (dispatch) => {
    return {
        dispatch
    };
}

const fetchLoadPlanning = async (props) => {
    props.dispatch(initialiseLoadPlanning());
    const httpOptions = {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${xxxxxxxx}`
        }
    };
    fetch('/Api/Planning/Get_Data?' + "database=xxxxxx", httpOptions)
        .then(res => res.json())
        .then(res => {
            if (res.hasError) {
                throw res.error;
            }
            props.dispatch(initialiseLoadPlanningSuccess(res.data));
            return res.data;
        })
        .catch(error => {
            props.dispatch(initialiseLoadPlanningError(error));
        });
}

const LoadPlanningList = (props) => {
    useEffect(() => {       
        fetchLoadPlanning(props);
    }, [])

    useEffect(() => {
        console.log('props changed',props);
    },[props])
}

道具更改的控制台日志发生在 props.pending 的更改上，而不是在 props.dispatch(initialiseLoadPlanningSuccess(res.data)) 的调度上；

控制台日志

您的帮助和智慧将是最有帮助的，在此先感谢

标签： reactjsreduxreact-redux