javascript - 如何在 redux 中获取 ById

Question

我是 react 和 redux 的新手，尝试使用 api 获取数据，但尝试通过 id 获取，不幸的是，id在 redux 记录器中未定义，服务器端没有返回结果，

这是我的代码

我的路线 <Route path="/admin/:id" component={AdminPage} />

Action

function getAll(id){
    return dispatch =>{
        dispatch(request(id));

        adminService.getAll(id)
        .then( admin => {

            dispatch(success(admin));
            dispatch(alertActions.success('Welcome Back !'));

        },error => {

            dispatch(failure(error.toString()));
            dispatch(alertActions.error(error.toString()));

        });

    };

    function request(id)    { return { type: adminConstants.GETALL_REQUEST, id } }
    function success(admin) { return { type: adminConstants.GETALL_SUCCESS, admin } }
    function failure(error) { return { type: adminConstants.GETALL_FAILURE, error } }

reducer

export function admin( state={}, action){
    switch(action.type){

        case adminConstants.GETALL_REQUEST:
        return { loading: true, id : action.id };

        case adminConstants.GETALL_SUCCESS:
        return { items: action.admin };

        case adminConstants.GETALL_FAILURE:
        return { error: action.error };

        default:
        return state
    }
}

服务

function getAll(id){

    const requestOptions = {
        method : 'GET',
        headers: authHeader()
    };
    return fetch(`${apiUrl}/admin/${id}`, requestOptions).then(handleResponse)
    .then( data => {  return data; });
}

管理页面

class AdminPage extends React.Component{



    componentDidMount(){
        this.props.dispatch(adminActions.getAll());
    }

    render(){
        const { admin } = this.props;
        return(
            <div>

                <h3> Admin Panel</h3>

                {admin.items &&
                    <ul>
                        {admin.items.map((data, index) =>
                            <li key={data.id}>
                             email id : {data.email},
                             end date : {data.dateEnd},
                             customerId : {data.customerId}

                            </li>
                        )}
                    </ul>
                }


            </div>
            );
    }
}




function mapStateToProps(state) {

    const { admin } = state;

    return { admin};
}


const connectedAdminPage = connect(mapStateToProps)(AdminPage);
export { connectedAdminPage as AdminPage };

主页上的链接

<Link to="/admin/5c4f69d5259f7d14434b4cb6">Admin</Link>

Answer 1

如果你想获取

中的“id”

Route path="/admin/:id">

然后尝试

console.log("mark1",this.props.match.params.id) 

在“AdminPage”组件内。如果它有效，那么您可以通过组件将其传递给调度程序并在您的函数中使用。

有关更多文档，请尝试 https://reacttraining.com/react-router/web/example/url-params .

如果这不是您要问的问题，请在下方发表评论，我会相应地进行编辑。 :)

编辑:这里是“AdminPage”的解决方案

class AdminPage extends React.Component{



    componentDidMount(){
        this.props.dispatch(adminActions.getAll(this.props.match.params.id));
    }
...
}

现在应该不是undefined在action中了，你能确认一下吗？