Javascript 反应：在本地存储中重复使用持久性_Javascript_Reactjs_Redux

Javascript 反应：在本地存储中重复使用持久性

javascript reactjs redux

Javascript 反应：在本地存储中重复使用持久性,javascript,reactjs,redux,Javascript,Reactjs,Redux,我正在尝试使用Redux将数据持久化到本地存储。我刚做了一组字母表。每当我使用onclick侦听器单击元素时，我每次都会看到控制台日志语句，其中包含一个随机字母，但UI不会像使用setState（）调用那样重新呈现，直到我刷新页面。我错过了什么 src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import

我正在尝试使用Redux将数据持久化到本地存储。我刚做了一组字母表。每当我使用onclick侦听器单击元素时，我每次都会看到控制台日志语句，其中包含一个随机字母，但UI不会像使用setState（）调用那样重新呈现，直到我刷新页面。我错过了什么

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore} from 'redux';
import myApp from './reducers';

import {loadState, saveState} from './localStorage'


const persistedState = loadState();

const store = createStore(
    myApp,
    persistedState
);

store.subscribe(() => {
    saveState(store.getState());
});

function render () {
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));
    registerServiceWorker();
}

render();

import React, { Component } from 'react';
import './App.css';
import { switchName } from './actions'

class App extends Component {

  constructor(props) {
    super(props);
    this.store = this.props.store;
  }

  handleChangeName = () => {
    let array = ["a","b","c","d","e","f","g","h","i"];
    const data = array[Math.floor(Math.random() * array.length)];
    this.store.dispatch(switchName(data));
  }



  render() {
    return (
      <div className="App">

        <p className="ntro" onClick = {this.handleChangeName} >
          Letter:  {this.store.getState().name}
        </p>
      </div>
    );
  }
}

export default App;

export const loadState = () => {
    try {
        const serializedState = localStorage.getItem('state');
        if (serializedState === null) {
            console.log("serialzed state null")

            return undefined;
        }
        return JSON.parse(serializedState);
    } catch (err) {
        return undefined;
    }
};


export const saveState = (state) => {
    try {
        console.log(state)
        const serializedState = JSON.stringify(state);
        localStorage.setItem('state', serializedState);

    } catch (err) {};
}

import { Provider } from 'react-redux';

// ...

function render () {
    ReactDOM.render(<Provider store={store}><App store={store}/></Provider>, document.getElementById('root'));
    registerServiceWorker();
}

import { connect } from 'react-redux'

// ...

class App extends Component {

  handleChangeName = () => {
    let array = ["a","b","c","d","e","f","g","h","i"];
    const data = array[Math.floor(Math.random() * array.length)];
    this.props.switchName(data);
  }

  render() {
    return (
      <div className="App">

        <p className="ntro" onClick = {this.handleChangeName} >
          Letter:  {this.props.name}
        </p>
      </div>
    );
  }
}

// note that `store` is no longer used inside the `App` component

const mapState = state => ({ state.name });
const actions = { switchName };

export default connect(mapState, actions)(App);

// ...

store.subscribe(() => {
    saveState(store.getState());
    render();
});

function render () {
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));
    registerServiceWorker();
}

render();

src/localstorage.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore} from 'redux';
import myApp from './reducers';

import {loadState, saveState} from './localStorage'


const persistedState = loadState();

const store = createStore(
    myApp,
    persistedState
);

store.subscribe(() => {
    saveState(store.getState());
});

function render () {
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));
    registerServiceWorker();
}

render();

import React, { Component } from 'react';
import './App.css';
import { switchName } from './actions'

class App extends Component {

  constructor(props) {
    super(props);
    this.store = this.props.store;
  }

  handleChangeName = () => {
    let array = ["a","b","c","d","e","f","g","h","i"];
    const data = array[Math.floor(Math.random() * array.length)];
    this.store.dispatch(switchName(data));
  }



  render() {
    return (
      <div className="App">

        <p className="ntro" onClick = {this.handleChangeName} >
          Letter:  {this.store.getState().name}
        </p>
      </div>
    );
  }
}

export default App;

export const loadState = () => {
    try {
        const serializedState = localStorage.getItem('state');
        if (serializedState === null) {
            console.log("serialzed state null")

            return undefined;
        }
        return JSON.parse(serializedState);
    } catch (err) {
        return undefined;
    }
};


export const saveState = (state) => {
    try {
        console.log(state)
        const serializedState = JSON.stringify(state);
        localStorage.setItem('state', serializedState);

    } catch (err) {};
}

import { Provider } from 'react-redux';

// ...

function render () {
    ReactDOM.render(<Provider store={store}><App store={store}/></Provider>, document.getElementById('root'));
    registerServiceWorker();
}

import { connect } from 'react-redux'

// ...

class App extends Component {

  handleChangeName = () => {
    let array = ["a","b","c","d","e","f","g","h","i"];
    const data = array[Math.floor(Math.random() * array.length)];
    this.props.switchName(data);
  }

  render() {
    return (
      <div className="App">

        <p className="ntro" onClick = {this.handleChangeName} >
          Letter:  {this.props.name}
        </p>
      </div>
    );
  }
}

// note that `store` is no longer used inside the `App` component

const mapState = state => ({ state.name });
const actions = { switchName };

export default connect(mapState, actions)(App);

// ...

store.subscribe(() => {
    saveState(store.getState());
    render();
});

function render () {
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));
    registerServiceWorker();
}

render();

src/reducers.js

const initialState = {
    name: "nada"
}

export default (state = initialState, action) => {
    switch (action.type) {
        case "SWITCH_NAME":
            return Object.assign({}, state,{
                name: action.data
            })

        default:
            return state

    }
}

您的

应用程序

组件未订阅存储，因此在存储更改时不会重新呈现（即，它将仅使用从

store.getState（）返回的第一个名称
值
要修复此问题，您可以使用将连接到存储，而不是将其作为道具传递
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore} from 'redux';
import myApp from './reducers';

import {loadState, saveState} from './localStorage'


const persistedState = loadState();

const store = createStore(
    myApp,
    persistedState
);

store.subscribe(() => {
    saveState(store.getState());
});

function render () {
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));
    registerServiceWorker();
}

render();

import React, { Component } from 'react';
import './App.css';
import { switchName } from './actions'

class App extends Component {

  constructor(props) {
    super(props);
    this.store = this.props.store;
  }

  handleChangeName = () => {
    let array = ["a","b","c","d","e","f","g","h","i"];
    const data = array[Math.floor(Math.random() * array.length)];
    this.store.dispatch(switchName(data));
  }



  render() {
    return (
      <div className="App">

        <p className="ntro" onClick = {this.handleChangeName} >
          Letter:  {this.store.getState().name}
        </p>
      </div>
    );
  }
}

export default App;

export const loadState = () => {
    try {
        const serializedState = localStorage.getItem('state');
        if (serializedState === null) {
            console.log("serialzed state null")

            return undefined;
        }
        return JSON.parse(serializedState);
    } catch (err) {
        return undefined;
    }
};


export const saveState = (state) => {
    try {
        console.log(state)
        const serializedState = JSON.stringify(state);
        localStorage.setItem('state', serializedState);

    } catch (err) {};
}   

import { Provider } from 'react-redux';

// ...

function render () {
    ReactDOM.render(<Provider store={store}><App store={store}/></Provider>, document.getElementById('root'));
    registerServiceWorker();
}

import { connect } from 'react-redux'

// ...

class App extends Component {

  handleChangeName = () => {
    let array = ["a","b","c","d","e","f","g","h","i"];
    const data = array[Math.floor(Math.random() * array.length)];
    this.props.switchName(data);
  }

  render() {
    return (
      <div className="App">

        <p className="ntro" onClick = {this.handleChangeName} >
          Letter:  {this.props.name}
        </p>
      </div>
    );
  }
}

// note that `store` is no longer used inside the `App` component

const mapState = state => ({ state.name });
const actions = { switchName };

export default connect(mapState, actions)(App);

// ...

store.subscribe(() => {
    saveState(store.getState());
    render();
});

function render () {
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));
    registerServiceWorker();
}

render();

或者，您可以在src/index.js中的subscribe
回调中添加一个render（）
调用
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore} from 'redux';
import myApp from './reducers';

import {loadState, saveState} from './localStorage'


const persistedState = loadState();

const store = createStore(
    myApp,
    persistedState
);

store.subscribe(() => {
    saveState(store.getState());
});

function render () {
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));
    registerServiceWorker();
}

render();

import React, { Component } from 'react';
import './App.css';
import { switchName } from './actions'

class App extends Component {

  constructor(props) {
    super(props);
    this.store = this.props.store;
  }

  handleChangeName = () => {
    let array = ["a","b","c","d","e","f","g","h","i"];
    const data = array[Math.floor(Math.random() * array.length)];
    this.store.dispatch(switchName(data));
  }



  render() {
    return (
      <div className="App">

        <p className="ntro" onClick = {this.handleChangeName} >
          Letter:  {this.store.getState().name}
        </p>
      </div>
    );
  }
}

export default App;

export const loadState = () => {
    try {
        const serializedState = localStorage.getItem('state');
        if (serializedState === null) {
            console.log("serialzed state null")

            return undefined;
        }
        return JSON.parse(serializedState);
    } catch (err) {
        return undefined;
    }
};


export const saveState = (state) => {
    try {
        console.log(state)
        const serializedState = JSON.stringify(state);
        localStorage.setItem('state', serializedState);

    } catch (err) {};
}   

import { Provider } from 'react-redux';

// ...

function render () {
    ReactDOM.render(<Provider store={store}><App store={store}/></Provider>, document.getElementById('root'));
    registerServiceWorker();
}

import { connect } from 'react-redux'

// ...

class App extends Component {

  handleChangeName = () => {
    let array = ["a","b","c","d","e","f","g","h","i"];
    const data = array[Math.floor(Math.random() * array.length)];
    this.props.switchName(data);
  }

  render() {
    return (
      <div className="App">

        <p className="ntro" onClick = {this.handleChangeName} >
          Letter:  {this.props.name}
        </p>
      </div>
    );
  }
}

// note that `store` is no longer used inside the `App` component

const mapState = state => ({ state.name });
const actions = { switchName };

export default connect(mapState, actions)(App);

// ...

store.subscribe(() => {
    saveState(store.getState());
    render();
});

function render () {
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));
    registerServiceWorker();
}

render();

/。。。
store.subscribe（（）=>{
saveState（store.getState（））；
render（）；
});
函数渲染（）{
ReactDOM.render（？
谢谢！！！我最初确实使用了redux persist
，但我正在在线观看教程（）Dan Abramov没有使用库，所以我尝试了这种方法。我看到的是，我使用的是redux
库，而不是react-redux
…这是一种糟糕的做法吗？正确，你只是在使用react和redux，而不是react-redux。使用react-redux是完全可选的，但是，在我看来，你会发现一些问题如果你使用它会容易得多。另外，请记住，它帮助你解决了你的问题。