将我的登录凭据存储在 redux-react 中

我想将我的登录凭据存储在 redux-react 中。我附加了几行代码（问题的一部分）。

sksignup.js：

import React, { Component } from 'react';
import { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { connect, useDispatch, useSelector } from 'react-redux';
import { namesactions } from '../store/display';

function Sksignup() {
  const dispatch = useDispatch()

  const showdetails = () => {
    dispatch(namesactions.updatename({ shopname, }))
  }

  const insertdata = () => { #backend code that works fine
    axios.post('http://localhost:3001/register', { shopname: shopname, })
      .then( 
        navigate('/userentry')
      ) 

  <label>enter your shop name:</label>
  <input type="text" name="shopname" onChange={showdetail} />
  <button onClick={insertdata}>register</button>

store相关的代码（创建用于存储redux相关的文档）文件夹

显示.js\商店：

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

const names = createSlice({
  name: 'skdetail',
  initialState: { shopname: " ", },
  reducers: {
    updatename(state, action) {
      state.shopname = action.payload.shopname;
    }
  }
})

export const namesactions = names.actions;
export default names; 

索引.js\商店：

import { configureStore, createSlice } from "@reduxjs/toolkit";
import names from "./display";

const store = configureStore({
  reducer: {
    name: names.reducer,
  },
});

export default store;

索引.js\src:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import store from './store';
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import { Provider } from 'react-redux';
import { BrowserRouter } from "react-router-dom";

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

我的目标是找回shopname并将其呈现在另一个组件中，例如：

welcome, {shopname}

我应该使用 firebase 还是其他东西来实现这一点？

我尝试实现从一些教程中学到的解决方案，但组件未渲染（未显示）

要从 redux 存储中检索商店名称并将其显示在另一个组件中，您可以使用该组件中的 useSelector 挂钩从存储中获取值。这是一个例子：

import { useSelector } from 'react-redux';

function Welcome() {
  const shopname = useSelector(state => state.skdetail.shopname);
  return (
    <div>
      Welcome, {shopname}
    </div>
  );
}

export default Welcome;