reactjs - 从Reducer调用action

Question

我有一个应用程序，它从我的服务器加载数据。我从索引文件中调度 getData() 操作。我有几个reducer，与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 :

For now, just remember that the reducer must be pure. Given the same arguments, it should calculate the next state and return it. No surprises. No side effects. No API calls. No mutations. Just a calculation.

这里不过多赘述，关于 redux 与异步请求结合的问题，我想给大家举两个中间件的例子，它们专注于解决异步问题。

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

还有几种方法可以处理您的问题，我还没有提到，但我推荐 Redux Documentation (Async Actions)作为起点!