2016-03-31 2 views
5

Используя комбинацию среагировать, Redux и Thunk, я следующее:Где разумное место для изменения данных ответа в сокращении?

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; 

Два фрагменты выше сидеть хорошо, и я чувствую, что они соответствуют намерениям 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" }, 
] 

исследований до сих пор

Вариант 1 Глядя на пример асинхронной проверки на Redux, я вижу прежде чем это легкое прикосновение к ответу здесь: https://github.com/reactjs/redux/blob/master/examples/async/actions/index.js#L33

Вариант второй Глядя на других StackOverflow вопросы, это заставляет меня верить, держа его действий имеет смысл, так как переходы должны быть то, что изменяет состояние (но, возможно, это не реально рассчитывать, как состояние): Redux - where to prepare data

Вариант Три Я кренования, что это работа промежуточного слоя - в том, что, как normalizr обрабатывает его, но я не могу найти? непассивные примеры промежуточного программного обеспечения. Если промежуточное ПО - это переход сюда, должно ли промежуточное программное обеспечение отправлять какое-либо действие SET_STATE, или можно ли обновить его прямо там в промежуточном программном обеспечении?

EDIT

Экспериментировал с некоторым промежуточным слоем, такие как:

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

Это, кажется, работает нормально - это действительно намерение промежуточного слоя? Исходный вопрос - где это идеальное место?

+1

Я предлагаю извлечь логику выборки API в «DataService», которая также способна модифицировать возвращаемый объект JSON. В результате ваш '$ .getJSON (API_PATH)' становится 'DataService.getMyData (путь)', а 'then()' уже имеет правильно отформатированные данные. – lux

ответ

9

Что касается меня, я делаю такие вещи в действии (либо coursesLoaded, либо fetchData).

Вот причины, почему:

  • Это не хранить материал, это только внешнее управление данными, так что ничего общего с редукторами, которые предполагается изменить состояние магазина
  • Различные редукторы могут потребоваться те же исправленные данные, представьте, что у вас есть еще один редуктор, который собирает все additionalProperty для достижения целей, например, поэтому выполнение этого действия гарантирует, что правильные данные будут отправлены всем редукторам.
  • Это не типичная работа для промежуточного программного обеспечения, это относится только к одному действию, тогда как промежуточное программное обеспечение было бы полезно, если бы оно использовалось одинаково с помощью множества действий. Плюс использование промежуточного ПО более неясное и отделяет его от читателя. Редуктор action-> намного проще и не имеет большого недостатка.
+0

Хм, мне очень нравится этот процесс мышления. Я еще не использовал response/redux, но не знаю, как решать различные проблемы. – Chris

+0

Спасибо за вашу помощь – Chris

Смежные вопросы