Redux store 中的值总是返回 undefined

车辆

尝试将用户输入从表单存储到 redux,但是通过 useSelector 访问的值始终未定义。

切片组件:

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
  name: "userSettings",
  initialState: {
    interval: 15000,
  },
  reducers: {
    updateInterval: (state, action) => {
      state.interval = action.payload
    }
  },
});

export const { updateInterval } = userSlice.actions;
export const userRefreshInterval = (state) => state.userSettings;

export default userSlice.reducer;

输入表单组件:

import React, { useState } from 'react';
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import { useSelector, useDispatch } from 'react-redux'
import {userRefreshInterval, updateInterval} from "./store/userSlice.js";

export default function UserSettingsForm() {
  const [refreshInterval, setInterval] = useState("");
  const dispatch = useDispatch();
  const interval = useSelector(userRefreshInterval);

  console.log(interval); // <--- always undefined

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(updateInterval(refreshInterval));
  };

  const handleChangeInterval = (text) => {
    setInterval(text);
  };

  return (
    <Form onSubmit={handleSubmit} style={{margin: 10}} inline>
      <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
        <Label for="refreshInterval" className="mr-sm-2">Refresh Interval:</Label>
        <Input type="text" name="refreshInterval" id="refreshInterval" placeholder="interval" onChange={(e) => handleChangeInterval(e.target.value)} />
      </FormGroup>
      <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
        <Label for="roundDecimal" className="mr-sm-2">Round results to decimal: 
        </Label>
        <Input type="text" name="roundDecimal" id="roundDecimal" placeholder="roundDecimal" />
      </FormGroup>
      <Button>Submit</Button>
    </Form>
  );
}

按照要求使用 store.js 更新:

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

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

感觉好像错过了一些简单的事情,请帮助确定问题的原因。

易卜拉欣·哈利勒·阿米德

我还没有第一次看到你的商店。

尝试这个

export const userRefreshInterval = (state) => state.user;

因为您已将切片器命名为用户。如果你想使用

export const userRefreshInterval = (state) => state.userSettings;

像下面这样配置你的商店

export default configureStore({
  reducer: {
    userSettings: userReducer
  }
})

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在 props 中传递 redux store 为 undefined?

在 Redux 中构建 store

无法在 Redux 中修改 store

React Redux <Provider> 只返回 store 对象

redux store 上的数据返回初始状态

将值从组件传递到 Redux Store

React+Redux 值 undefined mapStateToProps

React-Redux组件不反映Redux Store中的更改

如何从Redux Store-React JS,Redux中删除板

在Util文件中访问Redux Store

处理 Redux Store 数据中的依赖项

如何访问 Redux Store 中的数据?

Reactjs 通过 redux 从 store 中获取存储的值

如何在redux store redux中清除搜索过滤功能后返回原始状态

Redux - Undefined 不是一个对象(评估“store.getState”)

使用firestoreConnect的react-redux-firebase错误。TypeError:undefined不是对象(正在评估“ this.store.firestore”)

从Redux表单访问Redux Store

即使在 redux-logger 报告成功调度并在有效负载中使用正确值之后,Redux 状态也在组件中返回 undefined

使用Redux-Promise和Axios时,Reducer返回undefined

当我的 redux 存储更新时 useContext 返回 undefined

当我尝试访问 redux 状态时,它返回 undefined

如何将上传的值存储到 redux store

为什么 redux store 只获取 last dispatch Action 的值

从 Redux Store 检索状态

在Redux Store中的状态更改中重新渲染组件

组件中的 React-Redux 状态与 store 中的状态不同

反应redux props undefined

Redux中的store.dispatch是同步还是异步

在 React Native Redux 中获取 store not found 错误