Redux-从后端获取初始状态-这样做是正确的方法吗?

时间:2019-05-12 01:24:33

标签: reactjs redux react-redux

我想从后端(即showTutorial)获取一些数据,用于化简器中的初始状态。

我当时正在考虑只使用化简器在axios中进行调用,但是我不确定这是否是最好的方法。

这是现在完成的方式:

import { UNSET_TUTORIAL, SET_FILTER_BLOCKS } from "../actions/types";


const initialState = {
  showTutorial: true, // <-- instead of initializying to true, do the axios call
  filterBlocks: "ALL"
};

export default (state = initialState, action) => {
  switch (action.type) {
    case UNSET_TUTORIAL:
          return { ...state, showTutorial: false };

    case SET_FILTER_BLOCKS:
      return { ...state, filterBlocks: action.payload };
    default:
      return state;
  }
};

我不想使用redux-persist,因为我想先了解正确的做法。

2 个答案:

答案 0 :(得分:1)

最好的方法是从App.js调用相关动作,然后渲染“加载”,直到正确提取数据为止。显然,如果发生错误,您将不会继续渲染组件,而是显示一条错误消息。

Reducers永远不要调用动作,这破坏了redux流。

答案 1 :(得分:1)

如何执行此操作以及如何从任何其他组件的后端更新状态之间没有区别。

您应该在顶级应用程序组件(或在应用程序启动时创建的任何组件)上触发操作,该操作会从后端加载数据并使用后端的结果分派该操作。然后,减速器将基于此操作更新状态。

顶级应用组件上的操作触发可以通过安装组件时的生命周期事件来完成,通常是getDerivedStateFromProps()