从 Reducer 调用操作

Question

我有一个应用程序，它从我的服务器加载数据。我从我的索引文件中调度 getData() 操作。我有几个减速器，与 combineReducers 一起加入 rootReducer。

我确实通过 getData 获取数据。但是如何调度 SET_DATA 动作，或者简单地用新数据改变状态？

我无法从 reducer 调用 store.dispatch 并以我目前拥有的方式调用该操作会更改我的状态中的数据，但不会重绘页面。

import { SYSTEM_FILTER, SET_DATA, GET_DATA, getData, setData } from '../actions/systemlist'
import rootReducer from './index'

const initialState = {
      systemFilters: true,
      systems: []
    };
export default function systemlist(state=initialState, action) {
  switch (action.type) {
    case SYSTEM_FILTER:
       var enabled=document.getElementById("filterSystems").checked;
       return {systemFilters: enabled, systems: state.systems}
    case GET_DATA:
       console.log("Getting data");
       $.getJSON("../data/systems.json", function(data) {
          data=data.sort(function(a, b) {
             var textA = a.name.toUpperCase();
             var textB = b.name.toUpperCase();
             return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
          });
          systemlist(state, {type: "SET_DATA", data: data});
       });
       return state
    case SET_DATA:
       console.log("Setting data");
       $("#systemsMenuCounter").html(action.data.length);
       return {systemFilters: state.systemFilters, systems: action.data}
    default:
      return state
  }
}

Answer 1

首先，你的 reducer 函数应该是纯的。这意味着什么？ The redux documentation says:

现在，只需记住 reducer 必须是纯的。鉴于相同 参数，它应该计算下一个状态并返回它。不 惊喜。无副作用。没有 API 调用。没有突变。只是一个 计算。

这里不赘述，关于redux结合异步请求的问题，我给大家举两个中间件的例子，重点解决异步问题。

1. Thunk 解决了动作创建者返回函数以执行条件调度的问题。
2. Sagas 使用生成器函数链接操作

我还没有提到其他几种处理您的问题的方法，但我建议以Redux Documentation (Async Actions) 为起点！