标签: react-redux

我是 Next JS 的新手。

我使用Next JS和Redux。

我有一个简短的代码如下：

const AdminContainer = (props) => {
  
  return (
    <AdminMasterView>
      <DashboardView studentList={props.studentListServer}/>
    </AdminMasterView>
  )
}

export const getStaticProps = (async () => {

  let response = await db.getInstance().query('SELECT * FROM student_register;');

  return {
    props: {
      studentListServer: response
    }, // will be passed to the page component as props
  }
})

const mapStateToProps = state => ({
  studentList: state.studentInfoReducers.studentList
});

const mapDispatchToProps = {
  getStudentRegisterAction
};

export default connect(mapStateToProps, mapDispatchToProps)(AdminContainer); …

如果我使用 setInterval(line 15) 而不使用 useEffect ，那么它给出的结果是 2^n-1(0,1,3,7,15,31,63...) 而不是(0,1,2,3,4, ..)。所以我有一些问题
1）为什么当我直接调用setInterval而不使用useEffect时我会得到该输出2）如果我更改setCount（第9行）并且它通过直接使用setInterval而不使用useEffect给出正确的输出（就像我所做的那样）有什么办法3）如果没有useEffcet就不可能使用setInterval，那么为什么不可能呢？

如果我将 setInterval 放入 useEffect 中并最初渲染一次（第 12,13,14 行），那么它会给出正确的输出......但是当我直接使用 setInterval 时，我没有得到正确的输出。什么是差异赌注？
在这两种情况下，我都调用 setInterval 一次，但输出是 diff。

import React, {useEffect, useState } from 'react'
    
    export default function IncorrectDependency() {
    
    const [count,setCount]=useState(0)
    
    const inc=()=>{
        // console.log(count)
        setCount(preVal=>preVal+1)
    //    setCount(count+1)
    }
    // useEffect(()=>{
    //     setInterval(inc,1000)},[]
    // )
    setInterval(inc,1000)
    
        return (
            <div>
                <h1>{count}</h1>
               
            </div>
        )
    }

我的应用程序是这样的：

盖茨比计划

index.tsx - 应用程序的入口点 - 我调用

<Provider store={store}>
   <HomePage />
</Provider>

HomePage.js 用途mapStateToProps与用途connect(mapStateToProps)(HomePage)

当然，在我的主页中，我使用了多个 React 组件。我可以利用该商店，读取/写入该商店上发生的任何事情HomePage。

在我的主页上，我有指向 的链接ActivityPage。一旦我点击此页面并登陆那里 - 问题就开始了。

ActivityPage 使用多个子组件来完成任务。如何从 ActivityPage 访问读/写？

我无法useDispatch在商店中写入甚至读取。我可以在我的 ReactDev 工具上看到该商店，但在尝试读/写时，我收到 11 个错误，大部分是沿着我需要用以下内容包装组件的思路：<Provider>

我在 Stack Overflow 上阅读了不同的解决方案，这表明我需要拥有mapStateToProps并使用connect需要访问商店的任何组件。

这是行不通的，因为我特别希望从“新页面”访问商店。我需要为我的子页面创建另一家商店吗？请帮助。 :

我使用 redux 编写了一个简单的添加到购物车功能。当我尝试将产品添加到数组时，它会抛出错误：

state.products.push 不是一个函数。

初始状态

export const INITIAL_STATE = {
  products: []
};

我使用 redux-sauce 来调度该操作。

减速器

export const AddToCart = (state, { item }) => ({
  ...state,
  products: state.products.push(item),
});

我正在为 axios (React Native) 设置全局标头，因此我需要从 redux 存储中获取令牌。但是当我尝试获取它时，它会抛出错误：无效的挂钩调用

任何解决方法或解决方案都会有很大帮助！

import { useSelector } from 'react-redux';

let authToken;

function getToken() {
  authToken = useSelector(state => state?.authReducer?.authToken);
  return;
} getToken();

我的store.js：

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../features/userSlice";

export default configureStore({
  reducer: {
    user: userReducer,
  },
});

我应该导入什么index.js？
表明：Attempted import error: 'configureStore' is not exported from './app/store'

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { configureStore } from "./app/store";
import { Provider } from "react-redux";

ReactDOM.render(
  <React.StrictMode>
  Provider configureStore={configureStore}>
  <App/>
  </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

我正在使用 React Native/Firebase/Redux 构建一个简单的登录系统。我正在尝试找出如何捕获由于登录尝试失败而发生的错误。

这是我的 authscreen.js：

const [alertShowing, setAlertShowing] = useState(false);
const [alertMessage, setAlertMessage] = useState('');
...

  function handleLogin() {
    const response = dispatch(login(email, password));
    console.log(response);
  }

动作.js：

export const login = (email, password) => {
  return async (dispatch) => {
    try {
      const response = await Firebase.auth().signInWithEmailAndPassword(email, password);
      dispatch(getUser(response.user.uid));
    } catch (e) {
        return e;
    }
  };
};

上面的 console.log(response) 正确地向我显示了错误消息，但这显然对用户来说不是很有用。另请注意，使用正确的凭据我可以正确登录。

我真正想做的handleLogin()是检查响应是否是错误，如果是，setlAlertShowing(true)以及setAlertMessage我从 useDispatch 挂钩返回的内容，以便我可以很好地向用户显示它。

我该怎么办？TIA。

几天前我开始学习 RTK Query，我一直喜欢它很酷的功能和简单性，所以我决定在我使用 Next.js 构建的项目中从 useContext 切换到 RTK Query 以及使用 Node.js 和 Express 的自定义服务器。在这个项目中，我制作了一个用于登录和注册的 api 路由，在提供的自定义 axios 基本查询 RTK 查询的帮助下，可以使用 RTK 查询和 Axios 来实现该路由。登录和注册 api 端点已经有一个在 cookie 存储中存储令牌的逻辑。我将 RTK 查询与 axios 一起使用来发布用户请求，以便他们可以获得 cookie 存储中的令牌存储的响应。这种将用户令牌存储在 cookie 中的逻辑与 useContext 和 axios 配合得很好。但使用 RTK 查询时逻辑并未按预期工作，结果如下：

• 令牌已设置在 cookie 存储中，但我得到的响应状态为 401。
• 当用户在登录或注册页面中提交凭据时，他们应该被重定向到个人资料页面，并显示其详细信息，因为我使用 useQuery 来获取用户个人资料。但数据没有显示。这意味着存储的令牌无效。
• 即使令牌已存储在 cookie 中，我也无法获取用户信息。
• 每当我单击链接将我重定向到特定路线时，useQuery 都不会获取任何内容，当我返回个人资料时，将获取并显示用户详细信息，但当我再次刷新页面时，不会显示任何数据
• 每当第一次获取请求成功时，每当刷新页面时我总是会丢失数据。
• 所有这些问题仅发生在后端受中间件保护的路由上，并且中间件用于验证令牌。但我对重新加载后端数据不受保护的页面没有任何问题。
• 我的后端还有一个中间件，用于验证和检查 cookie 中的 token 是否为 true，以检查用户是否经过身份验证，如果为 false，则应将用户定向到前端的登录页面。获取和检查数据是否为 ​​true 的逻辑位于用受保护的路由包装的 HOC 组件内部，但每当数据值为 false 时，我仍然可以转到前端中的任何路由，而不是将我重定向到登录页面。当我将数据记录到控制台时，我收到了正确的数据。
• 从 cookie 中删除令牌成功。

    export const fetcherApi = createApi({
      reducerPath: "fetcherApi",
      baseQuery: …