javascript - `mapStateToProps` 在 react-redux 中的 reducers 之后没有被触发

Question

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

如果我没理解错的话，

• mapDispatchToProps用于注入(inject) dispatch组件内的功能
• mapStateToProps用于在 React 的存储更改时更新组件
• sagas用于在消息发送到 redux 时触发异步功能
• reducers用于在消息发送到 redux 时更改 react 的存储

然而，在我的项目中，当组件被挂载时，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()。

Answer 1

看起来您的 reducer 文件中的 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;
    }
};