Question

我有app，它从我的服务器加载数据。我从我的索引文件中调度getData（）动作。我有几个reducers，与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

首先，你的减速器功能应该是纯粹的。那是什么意思？ The redux documentation says：

现在，请记住减速器必须是纯净的。同样的参数，它应该计算下一个状态并返回它。没有惊喜。无副作用。没有API调用。没有突变。只是一个计算

这里没有详细介绍，关于redux与异步请求相结合的问题，我想给你两个中间件的例子，它们专注于解决异步性问题。

Thunk 解决了返回函数以执行条件派遣的动作创建者的问题。
Sagas使用生成器函数进行链接操作

还有其他一些方法可以解决我尚未提及的问题，但我建议将Redux Documentation (Async Actions)作为起点！

从Reducer调用操作

1 个答案: