如何通过操作从redux中的本地文件中获取json数据

Question

例如，我有一些带有 JSON 数据的 txt 文件：

"assets": [
           {    
              "id": 1,
              "name": "Mike",
              "contract": "N23421",
              "about": teacher      
           },
           {
              "id": 2,
              "name": "Helen",
              "contract": "N43212",
              "about": teacher  
           }
         ]

通常我使用 Redux 从服务器上传/解析这个文件。

那时我需要从本地存储中获取上传相同的文件。 那么，如何通过对本地文件使用 Actions 和 Reducers 来做到这一点？ 我将不胜感激任何帮助或建议。

Answer 1

我建议要么使用一些类似于redux-api-middleware 工作方式的本地存储中间件。除非您不会从服务器获取数据，否则您只需从本地存储中检索数据。这也可以很容易地扩展到保存数据。这里的想法是，您将根据您所处的请求阶段分派不同的操作。

例如

LOCAL_STORAGE_RETRIEVE_PENDING
LOCAL_STORAGE_RETRIEVE_SUCCESS
LOCAL_STORAGE_RETRIEVE_FAILURE

成功操作将包含检索到的 JSON 数据。

或者，您可以直接在操作创建器中访问本地存储。

这是一个用打字稿写的非常简单的例子。您还需要添加一个减速器，以适当地响应分派的操作。请注意，要使此示例正常工作，您需要添加 redux-thunk 中间件。

const localStorageRequest = () => ({
    type: 'LOCAL_STORAGE_REQUEST'
});

const localStorageDataRetrieved = (data) => ({
    type: 'LOCAL_STORAGE_DATA_RETRIVED'
    data,
});


export const getDataFromLocalStorage = (key: string) =>  (dispatch: Dispatch<any>) => {
    // This action might be used to change some state to pending or fetching.
    dispatch(localStorageRequest());
    const data = localStorage.getItem(key);
    dispatch(localStorageDataRetrieved(data));
};

目前，更简单的解决方案是在您的动作创建者中执行此操作。随着应用程序的增长，您可以稍后添加中间件。