Question

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

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

有没有简单的方法可以说“在我的axios呼叫完成之前什么都不做”???

Answer 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));
        });
    };
}

在需要

的reducer中使用它

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（）动作的应用程序的第一个屏幕

我希望这可以帮到你

在createStore之前加载数据

1 个答案: