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

时间:2019-01-04 19:42:10

标签: javascript reactjs redux react-redux

状态更改为商店后,视图无法呈现,我遇到麻烦。

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

MyComponent

mapStateToProps

操作

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;
    }
}

1 个答案:

答案 0 :(得分:0)

代码正常。将react-dom npm依赖项从16.4.2升级到16.7.0解决了该问题。