10

使用 React、Redux 和 Thunk 的组合，我有以下内容：

动作.js

import $ from 'jquery';
import * as types from '../constants/ActionTypes';
import { API_PATH } from '../constants/Config';

export function coursesLoaded(courses) {
    return { type: types.COURSES_LOADED, courses };
}

export function fetchData() {
    return (dispatch) => {
        return $.getJSON(API_PATH).then((response) => {
            dispatch(coursesLoaded(response.result));
        });
    };
}

减速器.js

import { routerReducer as routing } from 'react-router-redux';
import { combineReducers } from 'redux';
import * as types from '../constants/ActionTypes';

const initialState = {
    courses: [],
};

function main(state = initialState, action) {
    switch(action.type) {
        case types.COURSES_LOADED:
            return {
                ...state,
                courses: action.courses,
            };
        default:
            return state;
    }
}

const rootReducer = combineReducers({ main, routing });

export default rootReducer;

上面的两个片段坐得很好，我觉得它们符合 Redux 的意图。我现在想在响应中返回的字段到达容器之前对其进行一些修改。

例如，响应可能是：

[
    { code: "R101", name: "Intro to Redux", author: "Dan" },
    { code: "R102", name: "Middleware", author: "Dan" },
]

我想将其更改为（为简单起见的简单示例）：

[
    { code: "R101", name: "Intro to Redux", author: "Dan", additionalProperty: "r101_intro_to_redux" },
    { code: "R102", name: "Middleware", author: "Dan", additionalProperty: "r102_middleware" },
]

迄今为止的研究

选项一 查看 Redux 上的异​​步示例，我可以看到这里的响应很轻松： https ://github.com/reactjs/redux/blob/master/examples/async/actions/index.js#L33

选项二 查看其他 Stackoverflow 问题，它让我相信将其排除在操作之外更有意义，因为 reducer 应该是修改状态的东西（但也许这并不能真正算作状态？）： Redux - 在哪里准备数据

选项三 我倾向于认为这是中间件的工作——这就是 normalizr 处理它的方式，但我找不到任何非被动中间件示例。如果中间件是这里的选择，中间件应该调度某种 SET_STATE 动作，还是可以自由地在中间件中更新状态？

编辑

试验了一些中间件，比如：

import { lowerCase, snakeCase } from 'lodash';
import * as types from '../constants/ActionTypes';

    export default store => next => action => {
        if(action.type == types.COURSES_LOADED) {
            action.courses = action.courses.map((course) => {
                course.additionalProperty = snakeCase(lowerCase(`${course.code} ${course.name}`));
                return course;
            });
        }
        return next(action);
    }

它似乎工作正常 - 这确实是中间件的意图吗？原始问题成立 - 理想地点在哪里？

4

2 回答 2

14

至于我，我在行动中做这种事情（coursesLoaded或者fetchData）。

以下是原因：

  • 这不是存储材料，这只是外部数据管理，因此与应该更改存储状态的减速器无关
  • 不同的 reducer 实际上可能需要相同的更正数据，additionalProperty例如，假设您有另一个 reducer 收集所有数据以达到目的，因此在操作中执行此操作可确保将正确的数据发送到所有 reducer。
  • 这不是中间件的典型工作，它只特定于一个动作，而如果中间件被一堆动作以相同的方式使用，它就会很有用。另外，使用中间件更加晦涩难懂，并且将其与读者分开。拥有 action-> reducer 更简单，并且没有任何主要缺点。
于 2016-03-31T08:32:50.207 回答
0

或者您可以使用选择器，并将原始文件保存在 redux 商店中。

const mapStateToProps = state => {
  courses: mySelectorThatAddsFields(state.courses),
}
于 2020-11-25T11:15:58.170 回答