Redux поток данных для отправки деталей к действию через пользователя - PullRequest
Новая
       6

Redux поток данных для отправки деталей к действию через пользователя

0 голосов
/ 08 февраля 2019

У меня есть приложение React / Redux (с использованием Typescript), где я получаю список пользователей со стороны сервера.Проблема возникает, когда я снова пытаюсь запросить список пользователей, когда пользователи пытаются фильтровать по введенному мной тексту.Действие никогда не получает данные (пользовательский фильтр) от пользователя, поэтому я получаю список пользователей, не отфильтрованных, как в начале.

Действие 

export const getUsers = (data?: UserFiltersState) => {
    const url = encodeQueryData(data)
    return {
        type: UserActionTypes.GET_USERS,
        payload: fetch('app/admin/user/search/multisearch' + url)
        .then(res => res.json())
        .then(json => json)
        .catch(ex => {
            console.log('users request error.', ex)
            return []
        })
    }
}

Редуктор 

export const reducer: Reducer<UsersState> = (state = initialState, action) => {
    switch (action.type) {
        case UserActionTypes.GET_USERS: {
            return  {...state, loading: true, data: action.payload }
        }
        default: {
            return state
        }
    }
}
export { reducer as usersReducer }

userlistcomponent 

class AdminUsersPage extends Component<AllProps, AdminUserPageState> {
    constructor(props: AllProps) {
        super(props)
    }

    state: AdminUserPageState = {
        filters: {
            name: ''
        }
    }

    componentDidMount() {
        const { data } = this.props
        if (!data || data.content === undefined) {
            // Gettign the users properly.
            this.props.getUsers()
        }
    }

    renderUSers() {
        if (this.props.data.content !== undefined) {
            return this.props.data.content.map((user, index) => {
                return (
                    <tr key={index}>
                        <td>{ user.name }</td>
                    </tr>
                )
            })
        }
    }

    setFilter(e: React.ChangeEvent<HTMLInputElement>) {
        this.setState({
            filters: {
                name: e.target.value
            }
        })
        // Requesting the users again but the action never get the filters
        this.props.getUsers(this.state.filters)
    }

    render() {
        return (
            <div>
                <input type="text" onChange={ e => this.setFilter(e)  } value={ this.state.filters.name } />
                <Table>
                    <thead>
                        <tr>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.renderUSers()}
                    </tbody>
                </Table>
            </div>
        )
    }
}

const mapStateToProps = ({ users }: ApplicationState) => {
    return {
        loading: users.loading,
        data: users.data,
        errors: users.errors
    }
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
    getUsers: () => dispatch(getUsers())
})

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(AdminUsersPage)

Я думаю, что есть кое-что, что я не понимаю из этого рабочего процесса с реакцией / редукцией, также я не уверен, что правильный способ отправки фильтров устанавливает их в состояние (я думаю, это не плохая практика, думая, что яу меня будет несколько фильтров)

1 Ответ

0 голосов
/ 08 февраля 2019 
const mapDispatchToProps = (dispatch: Dispatch) => ({
    getUsers: () => dispatch(getUsers())
});

Из вышеприведенного объявления getUser регистрируется для отправки своего действия без переадресации ему аргументов.

По этой причине вызов getUsers с filter не переадресовываетfilter создателю действия.

Чтобы зарегистрировать его таким образом, чтобы он передавал переданные ему аргументы, необходимо, чтобы функция, которую получает компонент, принимала аргумент и передавала его создателю действия , например

const mapDispatchToProps = (dispatch: Dispatch) => ({
    getUsers: filter => dispatch(getUsers(filter))
});
...