Question

我正在学习如何使用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);

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

Redux-Persist->我的redux持久不持久

0 个答案: