Redux-Persist Library - 将数据从计数器保存到localStorage

Question

美好的一天，

学习redux的开始可能令人困惑

此代码中的步骤：

• 创建减速器以增量
• 创建商店
• 如果用户采取onClick动作，则函数增量调度前面提到的reducer
• 在这个相同的组件中显示数据
• 使用store在Provider中渲染组件

在这种情况下，需要将带有数据的状态保存到LocalStorage。

我该怎么做才能将counter_state保存到本地存储？

// reducer
function counter(state=0, action) {
  console.log('counter', action)
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;

      return state;
  }
}

///create store
const store = createStore(counter);

// React Component

class Counter extends React.Component {
  increment() {
    this.props.dispatch({
      type: 'INCREMENT'
    });
  }

  render() {
    return (
    <div>
      {this.props.state}
      <div>
        <button onClick={this.increment.bind(this)}>+</button>
      </div>
    </div>
    )
  }
}

const mapStateToProps = function (state) {
  return {state};
}

const CounterApp = connect(mapStateToProps)(Counter);

class Test5 extends React.Component {
  render() {
    return (
      <Provider store={store}>
          <CounterApp />
      </Provider>
    )
  }
}

export default Test5;

Answer 1

localStorage有一个非常简单的界面。我建议在mdn上查找它的API。由于您没有使用任何正在导入的持久性库，因此可以直接尝试将其用于学习目的：

1. 在state.counter中将mapStateToProps的值写入localStorage
2. 当你执行createStore时，你可以使用preloadedState传递第二个参数。因此，在您执行此操作之前，请从localStorage中读取以获取计数器的已保存值。

一些评论：

• reducer中的state通常是具有属性的对象。它可以使用一个简单的数字，但如果你想学习redux，你会想在这里使用一个对象。
• 一旦你对redux的基础知识感到满意，我建议继续使用像redux-persist这样的更复杂的库。为了让一个简单的计数器工作，这是一个太多的抽象。