Используя комбинацию среагировать, 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);
}
Это, кажется, работает нормально - это действительно намерение промежуточного слоя? Исходный вопрос - где это идеальное место?
Я предлагаю извлечь логику выборки API в «DataService», которая также способна модифицировать возвращаемый объект JSON. В результате ваш '$ .getJSON (API_PATH)' становится 'DataService.getMyData (путь)', а 'then()' уже имеет правильно отформатированные данные. – lux