如何通过action在redux中从本地文件中获取json数据

时间:2017-06-11 19:39:29

标签: json reactjs redux react-router react-redux

例如,我有一些带有JSON数据的txt文件:

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

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

那时我需要从本地存储中获取上传相同的文件。 那么,如何通过将Actions和Reducers用于本地文件来实现此目的呢? 如有任何帮助或建议,我将不胜感激。

1 个答案:

答案 0 :(得分:2)

我建议使用一些与redux-api-middleware工作方式类似的本地存储中间件。除非您不从服务器获取数据,否则您只需从本地存储中检索数据即可。这可以很容易地扩展到保存数据。这里的想法是你会根据你所处的请求阶段发出不同的行动。

e.g。

LOCAL_STORAGE_RETRIEVE_PENDING
LOCAL_STORAGE_RETRIEVE_SUCCESS
LOCAL_STORAGE_RETRIEVE_FAILURE

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

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

这是一个用typescript编写的非常简单的例子。您还需要添加一个适当响应调度操作的reducer。请注意,要使用此示例,您需要添加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));
};

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