Trying to store user input from form into redux, however value accessed through useSelector is always undefined.
Slice component:
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;
Input form component:
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>
);
}
Update with store.js as asked:
import { configureStore } from '@reduxjs/toolkit'
import userReducer from "./userSlice";
export default configureStore({
reducer: {
user: userReducer
}
})
Feeling like missing something simple, pls help to identify the cause of the issue.
I haven't seen your store first.
try this
export const userRefreshInterval = (state) => state.user;
Because you have named your slicer as user. If you want to get state using
export const userRefreshInterval = (state) => state.userSettings;
Configure your store like the bellow
export default configureStore({
reducer: {
userSettings: userReducer
}
})