Redux存储不会在状态更改时更新组件视图

Question

我在状态更改为商店后无法渲染视图时遇到麻烦。

通过日志记录中间件，我可以看到正确调用了操作，并且存储的状态具有新值。 如果我使用react-router导航到另一个页面，然后回来，则可以从存储中正确显示用户，因此我知道mapStateToProps在工作。

为MyComponent

const mapStateToProps = (state) => {
    return {
        users: state.users.all
    };
};

const actionCreators = {
    fetchUsers
};

export class Users extends React.Component<UsersProps, UsersState> {
    constructor(props) {
        super(props);

        this.state = {           
            // initial values
        };
    }

    componentDidMount() {
        this.props.fetchUsers();
    }

    render() {
        // return PrimeReact DataTable with users prop
    }
}

export default compose(
    withRouter,
    connect(mapStateToProps, actionCreators),
    injectIntl,
)(Users);

操作

export function fetchUsers() {
    return async dispatch => {
        const users = await new UserService().users();
        return dispatch(receiveUsers(users));
    };
}

function receiveUsers(users: User[]) {
    return { users, type: RECEIVE_USERS };
}

减速器

export default combineReducers({
    users
});

function users(state, action) {
    switch (action.type) {
        case RECEIVE_USERS:
            return {
                ...state,
                all: action.users,
            };
        default:
            return state;
    }
}

商店

export default function configureStore(preloadedState) {
    const middlewares = [
        loggerMiddleware,
        thunkMiddleware,
    ];
    const middlewareEnhancer = applyMiddleware(...middlewares);

    const store = createStore(reducer, middlewareEnhancer);

    return store;
}

Answer 1

代码还可以。 将react-dom npm依赖性从16.4.2升级到16.7.0此问题。