调度外部组件

Posted 2023-02-22

【中文标题】调度外部组件

【英文标题】：Dispatch outside component

【发布时间】：2021-12-21 20:58:39

【问题描述】：

我想分派外部组件。我想使用此链接中的选项 2 [https://daveceddia.com/access-redux-store-outside-react/][1]。我的代码是这样的

const loginUser = async (data) => 
    return axios.get(url + "/sanctum/csrf-cookie").then(() => 
        axios.post(url + '/api/login', data)
            .then(res => 
                return res.data

            )
            .catch((err) => 
                console.log(err);

            )
    )

export const handleLogin = (data) => async (dispatch) => 
    console.log('test');
    try 
        const user = await loginUser(data);
        dispatch(actions.setUser(user));
     catch (err) 
        console.log(err);
    

进入我的组件

    const test = (e) => 
        e.preventDefault;
        handleLogin(email: '[e-mail]', password: 'password')
    
    return (
        <div className="container">
            <h2>Login</h2>
            <form onSubmit=handleSubmit(test)>
//...

它没有完成代码，它可能包含错误，但目前对我来说最重要的是为什么这段代码不起作用，如果有时是错误的，为什么不显示任何错误。我认为问题出在 sync(dispatch) 中。在此示例中，我添加了 console.log 进行测试，但未显示。如果没有该功能，则显示 console.log。 Redux thunk 也被添加到 store 中

const store = createStore(allReducers, composeWithDevTools(applyMiddleware(thunk)))

【问题讨论】：

问题的标题具有误导性，您显然想从反应组件中调度。

【参考方案1】：

像这样导入存储和使用：

  store.dispatch(actions.setUser(user));

您可以通过以下方式从组件中获取状态：

store.getState().items

【讨论】：

我不想导入商店。我想使用我向 ib 展示我的帖子的这种方法。我用过，但在其他地方没有，我想知道为什么。

我在其他帖子中回答你。

【参考方案2】：

您没有在组件和操作 js 中分派您的操作。 你可以通过 props 和 dispatch 调用组件中的动作，但我看不到 props，所以我使用 useDispatch 并在那里调用 handleLogin 动作。

在 action.js 文件中使用它：

 const user = await loginUser(data)(dispatch);

改为：

   const user = await loginUser(data);

然后在组件中：

   import useDispatch from "react-redux";
    

    const dispatch = useDispatch();
     const test = (e) => 
        e.preventDefault;
        dispatch(handleLogin(email: '[e-mail]', password: 'password'))
    

【讨论】：

提交nothink工作后看看console.log等。

我编辑了我的答案，再检查一遍