`mapStateToProps` 在 react-redux 中的 reducer 后不会触发答案

【问题标题】：`mapStateToProps` is not triggered after reducers in react-redux`mapStateToProps` 在 react-redux 中的 reducer 后不会触发
【发布时间】：2017-03-26 14:25:24
【问题描述】：

我正在玩 react、redux、react-redux 和 redux-sagas。我有一个组件，一旦挂载就会执行 API 调用，当调用执行时，应该在组件中添加数据。

如果我理解正确，

mapDispatchToProps用于在组件内注入dispatch函数
mapStateToProps 用于在 react 的 store 发生变化时更新组件
sagas 用于在向 redux 发送消息时触发异步功能
reducers 用于在向 redux 发送消息时更改 react 的 store

但是，在我的项目中，当组件挂载时，触发了API调用，改变了store，但是没有调用mapStateToProps，所以我的组件没有显示结果。

我不知道如何调试。

我错过了什么吗？

sagas/index.js

function* loadLinks(action) {
    try {
        const links = yield call(linksSearch, action.value);
        yield put({type: "LINKS_LOAD_SUCCEEDED", links: links, page: action.value.page});
    } catch (e) {
        yield put({type: "LINKS_LOAD_FAILED", message: {}});
    }
}

function* mySaga() {
    yield [
        takeEvery("LINKS_LOAD_REQUESTED", loadLinks)
    ]
}

export default mySaga;

reducers/index.js

const addLinks = (links, page, state) => {
    const newLinks = [page].reduce((init, page) => {
        init[page]=links;
        return init;
    }, state);
    return Object.assign(newLinks)
};

const requestedLinks = (state = {}, action) => {
    switch (action.type) {
        case 'LINKS_LOAD_SUCCEEDED':
            const newState = addLinks(action.links, action.page, state);
            return newState;
        default:
            return state;
    }
};

const reducer = combineReducers({
    requestedLinks,
});

export default reducer

containers/ConnectedLinksGrid.js

const mapStateToProps = (state, ownProps) => {
    return {
        links:
            (ownProps.page in state.requestedLinks) ?
                state.requestedLinks[ownProps.page] :
                []
    }

};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        loadLinks: () => {
            const value = ownProps;
            dispatch({type: "LINKS_LOAD_REQUESTED", value})
        }
    }
};

const ConnectedLinksGrid = connect(
    mapStateToProps,
    mapDispatchToProps
)(LinksGrid);

export default ConnectedLinksGrid;

注意：<LinksGrid /> 在挂载后调用 loadLinks()。

【问题讨论】：

标签： javascript reactjs redux redux-saga

【解决方案1】：

看起来你的 reducers 文件中的 addLinks 函数正在直接使用 init[page]=links; 行修改状态，这意味着当你的 reducer 然后返回新状态并且 redux 将新状态与旧状态进行比较时，没有差异，这意味着您的组件不会更新。

此外，您不需要 addLinks 函数的复杂性。你可以像这样更新你的主要 reducer 函数：

const requestedLinks = (state = {}, action) => {
    switch (action.type) {
        case 'LINKS_LOAD_SUCCEEDED':
            return Object.assign({}, state, {
              [action.page]: action.links,
            });
        default:
            return state;
    }
};

【讨论】：

哇...非常感谢！