Javascript 重复使用坚持->；我的redux persist不是persis

我正在学习如何使用redux persist，到目前为止，它正在工作。问题是，每当我切换页面，从中输入我希望存储在redux存储中的信息，然后将其持久化时，这些信息都会消失。商店里空无一人，这是为什么？此外，每当我在输入数据的页面上记录存储时，我看不到添加的内容，我只看到它被覆盖，我猜我并没有真正实现应有的缩减。 这是我的档案：

reducer.js：

import React, { Component } from 'react'
import Redux from 'react-redux'
import $ from 'jquery'
const products={
        name: ''
        }

   const reducers=(state=products,action)=>
        {
            switch(action.type)
            {
                case 'addProduct':
                    return{
                        ...state, 
                        name: $('.productCategoryField').val()
                    }

            }
        }

export default reducers

store.JS：

import React, {Component} from 'react'
import Redux from 'redux'
import {createStore} from 'redux'
import {persistReducer, persistStore} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import reducers from './reducers'

const persistConfig={
    key: 'root', 
    storage: storage
}

const pReducer = persistReducer(persistConfig, reducers)
export const store=createStore(pReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export const persistor =persistStore(store);
store.subscribe(()=>console.log('your store is now', store.getState()))

products.js：

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Button, Navbar, Nav, NavbarBrand, NavItem, NavLink} from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import reducers from './reducers'
import {store} from './store'
import {LinkContainer} from 'react-router-bootstrap'
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
class Products extends Component {
    render(){
    const {products} = this.props
    store.subscribe(()=>console.log('your store is now', store.getState()))

    
    return (
        <div>
             <Navbar variant='dark' bg='dark'>
                 <NavbarBrand>Your products</NavbarBrand>
                <Nav className='ml-auto'>
                    <NavItem>
                        <NavLink href='/add'>
                            Test
                        </NavLink>
                    </NavItem>
                </Nav>
            </Navbar>
            <Button>State</Button>

        </div>
    )
}
}
//create reducers-Check!
//create storage-Check!
const mapStateToProps=(state)=>
{
    return{
        products: state
    }
}

export default connect(mapStateToProps)(Products);

import React，{Component}来自“React”
从“react redux”导入{connect}
从“react bootstrap”导入{按钮、导航栏、导航栏、导航栏、导航项、导航链接}
导入“bootstrap/dist/css/bootstrap.min.css”
从“./还原程序”导入还原程序
从“/store”导入{store}
从“react router bootstrap”导入{LinkContainer}
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}
类产品扩展组件{
render（）{
const{products}=this.props
store.subscribe（（）=>console.log（'您的存储现在是'，store.getState（）））
返回(
你的产品
试验
陈述
)
}
}
//创建减速器检查！
//创建存储检查！
常量mapStateToProps=（状态）=>
{
返回{
产品：国家
}
}
导出默认连接（MapStateTops）（产品）；

addProduct.js：

import React from 'react'
import {store} from './store'
import reducers from './reducers'
import {Navbar, Nav, NavbarBrand, NavItem, NavLink, NavDropdown, Button} from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import products from './products'
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
import { LinkContainer } from 'react-router-bootstrap'
import './css/addProductsPage.css'

function addProduct() {
    const products=
    [
        {
            
        }
    ]
    const addProduct=()=>
    {
        store.dispatch({type: 'addProduct'})
    }
    return (
        <div>
            <Navbar variant='dark' bg='dark'>
                <NavbarBrand href='/'> Add Products </NavbarBrand>
                <Nav className='ml-auto'>
                    <NavItem>
                        <NavLink href='/'>
                            Your Products
                        </NavLink>
                    </NavItem>
                </Nav>
            </Navbar>
            <div className='enterProductsName'>
                <input className='productCategoryField form-control' placeholder="Enter your product's name"></input>
                <NavDropdown className='pickProductsDropdown'>
                <Button variant='warning'>
                    <storng>Fruits</storng> 
                </Button>
                <Button variant='success'>
                    <storng>Vegetables</storng> 
                </Button>
                <Button variant='primary'>
                    <storng>Others</storng> 
                </Button>
                </NavDropdown>
            </div>
            <div className='enterProductsAmount'>
                <Button onClick={()=>addProduct()}>Add Product</Button>


            </div>
        </div>
    )
}

export default addProduct

从“React”导入React
从“/store”导入{store}
从“./还原程序”导入还原程序
从“react bootstrap”导入{Navbar、Nav、NavbarBrand、NavItem、NavLink、NavDropdown、Button}
导入“bootstrap/dist/css/bootstrap.min.css”
从“./products”导入产品
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}
从“react router bootstrap”导入{LinkContainer}
导入“./css/addProductsPage.css”
函数addProduct（）{
康斯特产品=
[
{
}
]
const addProduct=（）=>
{
dispatch（{type:'addProduct'}）
}
返回(
添加产品
你的产品
水果
蔬菜
其他
addProduct（）}>添加产品
)
}
导出默认addProduct