Question

我是react-redux的新手。我正在尝试使用Redux的Todo应用程序。在这里，我需要存储数据并在应用程序打开后立即显示它们，并为此使用了redux-persist。而且效果很好。我陷入困境的那个正在行动。我在这里初始化了id = 0。因此，每次打开应用程序时，它都会存储id = 0的数据，然后递增。如何在添加新数据时引用持久存储的最后一个ID并使用它？

App.js

export const persistor = persistStore(store);

class App extends Component<Props> {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={<ActivityIndicator />} persistor={persistor}>
          <ToDoApp />
        </PersistGate>
      </Provider>
    );
  }
}

商店

const persistConfig = {
     key: 'root',
     storage,
     stateReconciler: autoMergeLevel2 
};

const pReducer = persistReducer(persistConfig, rootReducer);

export default (store = createStore(pReducer));

动作

import { ADD_TODO, TOGGLE_TODO } from './actionTypes';

let nextId = 0; // how to initialize nextId as the last id from persisted data?
export const addToDoo = text => ({
  type: ADD_TODO,
  id: nextId++,
  text
});

export const toggleTodo = id => ({
  type: TOGGLE_TODO,
  id
});

Answer 1

到目前为止，我还没有使用过redux-persist，我正在使用this technique，但这是题外话，您的问题仅与redux有关。

将ID分配给新待办事项不是动作创建者的工作，而是化简的工作。您的操作可能类似于：

const addTodo = text => ({
  type: ADD_TODO,
  text,
})

必须位于nextId的化简中。在启动（或页面重新加载）时，它将为0或存储在localStorage中的值。每次发生ADD_TODO操作时，该值就会增加：

const initialState = {
  nextId: 0,
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      //...
    case 'TOGGLE_TODO':
      //...
    default:
      return state
  }
}

我看到redux-persist具有将状态序列化到存储（用于浏览器的localStorage和用于React-Native的AsyncStorage）并在启动时进行检索的所有魔力。作为参考，这就是我要对纯React App（使用localStorage的旧方法）所做的事情：

在createStore之后的根index.js中，我从存储中获取值：const nextIdFromLS = storage.getItem("nextId")
如果该值存在，我将触发一个操作来设置nextId值store.dispatch(setNextId(nextIdFromLS))
操作SET_NEXT_ID使reducer使用localStorage中的nextId更新状态
下一次添加待办事项时，在case "ADD_TODO":内，我将按预期存储新的待办事项，但是我还将运行localStorage.setItem("nextId", this.state.nextId++)，以便我们存储值并刷新页面< / li>

以redux-persist（反应性本机）访问数据

1 个答案: