Redux连接React组件未更新状态更改

时间:2017-01-17 04:19:21

标签: javascript reactjs redux

每当调度我的'COLLEGE_ADDED'动作时,我都可以看到减速器中的状态变化。但是,不会调用CollegeSearchList组件及其子项上的更新相关生命周期方法。由于这个原因,这些组件不会重新渲染。

我已经阅读过关于不改变状态的文档,我不认为我是。完整的代码可以在https://github.com/tlatkinson/react-search-widget找到。

components / search / college / CollegeSearchList.js

class CollegeSearchList extends Component {
    componentWillUpdate (nextProps, nextState) {
        console.log(nextProps.searchItems);
        console.log(nextState);
        return true;
    }

    render () {
        return (
            <SearchList searchItems={this.props.searchItems} SearchListItem={CollegeSearchListItem} />
        )
    }
}

const mapStateToProps = (state, {id}) => {
    return {
        searchItems: getSearchResultsById(state.searchState, id),
        SearchListItem: CollegeSearchListItem,
    }
};

CollegeSearchList = connect(
    mapStateToProps
)(CollegeSearchList);

减速器/ search.js

const searchReducer = (searchState = [], action) => {
    switch(action.type) {
        case 'COLLEGE_SEARCH':
            return mergeData(searchState, action, 'college', 'phrase');
        case 'COLLEGE_SEARCH_SUCCESS':
            return mergeData(searchState, action, 'college', 'searchResults');
        case 'COLLEGE_ADDED':
            return updateCollegeAdded(searchState, action.collegeId, true);
        case 'COLLEGE_REMOVED':
            return updateCollegeAdded(searchState, action.collegeId, false);
        default:
            return searchState;
    }
};

export default searchReducer

const updateCollegeAdded = (searchState, collegeId, added) => {
    const newState = {...searchState};

    for (let id of Object.keys(newState)) {
        const searchComponent = searchState[id];

        if(searchComponent.searchType === 'college') {
            searchComponent.searchResults.forEach(searchResult => {
                if(searchResult.id === collegeId) {
                    searchResult.added = added;
                }
            });
        }
    }

    return newState;
};

const mergeData = (data, action, searchType, propertyModified) => {
    return {
        ...data,
        [action.id]: {
            searchType,
            ...data[action.id],
            [propertyModified]: action[propertyModified],
        }
    };
};

动作/ index.js

export const addRemoveCollege = (collegeId, collegeName, addToList) => (dispatch) => {
    if (addToList) {
        api.addToCollegeList(collegeId)
            .then(() => {
                dispatch({
                    type: 'COLLEGE_ADDED',
                    collegeId,
                    collegeName,
                });
            })
    } else {
        api.removeFromCollegeList(collegeId)
            .then(() => {
                dispatch({
                    type: 'COLLEGE_REMOVED',
                    collegeId,
                    collegeName,
                });
            })
    }
};

0 个答案:

没有答案
相关问题