Vị trí hợp lý để sửa đổi dữ liệu phản hồi trong Redux ở đâu?

Question

Sử dụng một sự kết hợp của phản ứng, Redux và thunk, tôi đã điều sau đây:

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

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

Hai đoạn trên ngồi tốt, và tôi cảm thấy như họ phù hợp với ý định của Redux. Tôi muốn bây giờ làm một số sửa đổi cho các lĩnh vực được trả lại trong phản ứng, trước khi họ nhấn container.

Ví dụ, phản ứng có thể là:

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

Và tôi muốn thay đổi nó để (ví dụ đơn giản vì đơn giản):

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

nghiên cứu cho đến nay

Tùy chọn Một Nhìn vào ví dụ không đồng bộ trên Redux, tôi có thể thấy ere là một cái chạm nhẹ để phản ứng ở đây: https://github.com/reactjs/redux/blob/master/examples/async/actions/index.js#L33

Lựa chọn Hai Nhìn vào câu hỏi Stackoverflow khác, nó dẫn tôi để tin giữ nó ra khỏi những hành động có ý nghĩa hơn, như gia giảm nên được những gì sẽ thay đổi trạng thái (nhưng có lẽ điều này không thực sự được tính là trạng thái): Redux - where to prepare data

Lựa chọn Ba tôi đã một inclining rằng đây là công việc của middleware - là đó là normalizr xử lý nó như thế nào, nhưng tôi không thể tìm thấy bất kỳ? ví dụ trung gian không thụ động. Nếu middleware là đi ở đây, nên middleware được gửi một số loại hành động SET_STATE, hoặc là nó miễn phí để cập nhật nhà nước phải có trong middleware?

EDIT

thử nghiệm với một số trung gian, chẳng hạn như:

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

Có vẻ như để làm việc tốt - là điều này thực sự là ý định của middleware? Câu hỏi ban đầu nắm giữ - nơi mà nó là nơi lý tưởng?

Answer 1

Đối với tôi, tôi làm những việc như vậy trong hành động (hoặc coursesLoaded hoặc fetchData).

Dưới đây là những lý do tại sao:

• này không lưu trữ tài liệu, đây chỉ là bên ngoài quản lý dữ liệu, vì vậy không có gì để làm với gia giảm mà có nghĩa vụ phải thay đổi trạng thái của các cửa hàng
• gia giảm khác nhau có thể thực sự cần cùng một dữ liệu đã sửa, hãy tưởng tượng bạn có một trình giảm tốc khác tập hợp tất cả các mục additionalProperty cho mục đích đạt được, ví dụ như thực hiện hành động đảm bảo rằng dữ liệu phải được gửi đến tất cả các bộ giảm tốc.
• Đây không phải là một công việc điển hình cho phần mềm trung gian, điều này chỉ dành riêng cho một hành động, trong khi phần mềm trung gian sẽ hữu ích nếu nó được sử dụng theo cùng một cách bởi một loạt các hành động. Plus sử dụng middleware là mơ hồ hơn và tách nó ra khỏi người đọc. Có hành động-> reducer là đơn giản hơn nhiều và không có bất kỳ bất lợi lớn.