在 createStore 之前加载数据

Posted 2023-03-28

【中文标题】在 createStore 之前加载数据

【英文标题】：Load data before createStore

【发布时间】：2018-04-20 00:49:45

【问题描述】：

我创建了一些 React 文件，其中一个初始化了 Redux 存储。但是，我确实需要在 store 初始化之前从 json 文件中加载一些数据。

我尝试导入一个加载 json 结构的脚本，然后将其分配给 createStore 的 initialState 值。但是 createStore 在加载和分配数据之前运行。

有什么简单的方法可以说“在我的 axios 调用完成之前不要做任何事情”？？？

【参考方案1】：

动作类型 actiontypes.js

export const LOAD_DATA_REQUEST='LOAD_DATA_REQUEST';
export const LOAD_DATA_SUCCESS='LOAD_DATA_SUCCESS';
export const LOAD_DATA_ERROR='LOAD_DATA_ERROR';

动作

actions.js

import * as Actions from './actiontypes';

function load() 
    return  type: Actions.LOAD_DATA_REQUEST ;


function success(res) 
    return  type: Actions.LOAD_DATA_SUCCESS, payload: res ;


function error(ex) 
    return  type: Actions.LOAD_DATA_ERROR, payload: ex ;

export function loadData(url) 
    return (dispatch) => 
        dispatch(load());
        axios.get(url).then((res) => 
            dispatch(success(res));
        ).catch((ex) => 
            dispatch(error(ex));
        );
    ;

在需要的减速器中使用它

import * as Actions from './actiontypes';
const newState = Object.assign(, state);
switch (action.type) 
    case Actions.LOAD_DATA_REQUEST:
        
            //maybe you load
            newState.loading = true;
            return newState;
        
    case Actions.LOAD_DATA_SUCCESS:
        
            const res = action.payload;
            //do what you need  for this reducer

            return newState;
        
    case Actions.LOAD_DATA_ERROR:
         /// maybe you will want to show some error message in some reducer? 
        return newState; 
    

您只需要在您的应用程序的第一个屏幕上的 componentWillMount() 调用 loadData() 操作

希望对你有帮助

【讨论】：

谢谢 :) 我想这会奏效。但在您的情况下，Redux 商店已经启动并运行。我的问题是其他组件试图访问存储值。所以想在 createStore 运行之前加载 json 对象。但我想你的例子是我见过的最好的建议。

不客气。把所有的东西都想成盒子..在 createStore 之前填充它没有区别。制作一个组件 SplashScreen 并在您的一个 recuder 上使用诸如加载状态之类的属性呈现一条消息，例如“正在加载应用程序请等待”，如果加载状态为 false，则呈现子组件（您的主要组件）。我希望现在很清楚..

感谢 Saltuk！隐藏（不渲染）直到加载成功。谢谢你帮助我。