在哪裏可以修改響應數據？

Question

使用反應，終極版和咚的組合，我有以下：

actions.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; 

兩個片段以上仰臥

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)); 
     }); 
    }; 
} 

reducer.js好吧，我覺得他們符合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上的異步示例，我可以看到ERE是光觸摸這裏的響應： https://github.com/reactjs/redux/blob/master/examples/async/actions/index.js#L33

方案二 綜觀其他＃1的問題，這使我相信保持它的行動更有意義，因爲還原劑應該是什麼修改狀態（但也許這並不能真正算作狀態）： Redux - where to prepare data

方案三 我有一個傾斜，這是中間件的工作 - 是這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); 
    } 

這似乎很好地工作 - 這是確實的中間件的用意何在？原始問題成立 - 理想的地方在哪裏？

Answer 1

至於我我做這種事情的行動（coursesLoaded或fetchData）。

這裏是原因：

• 這不是存儲材料，這僅僅是外部數據管理，所以沒有任何關係，這是爲了改變存儲的狀態
• 不同減速器減速可能實際上需要相同的更正數據，假設您有另一個縮減器，例如收集所有additionalProperty的縮減器，因此在此操作中確保將正確的數據發送給所有減速器。
• 這不是一箇中間件的典型工作，它只針對一個動作，而中間件如果通過一系列動作以相同的方式使用，它將非常有用。另外使用中間件更加模糊，並將其與讀者區分開來。行動 - >減速機更簡單，沒有任何主要的缺點。