Redux перезаписывает модель предыдущим состоянием

Question

В настоящее время я делаю пример проекта в AngularJs в сочетании с Redux. Я изо всех сил пытаюсь получить сопоставления от работы редуктора.

У меня есть простой ввод, где пользователи могут установить новое имя вместе с раскрывающимся списком, чтобы выбрать "компанию".

<input type="text" ng-model="$ctrl.single.object.name">
<select ng-change="$ctrl.getProperties()"
ng-options="option.description as option.description for option in $ctrl.list.all"
ng-model="$ctrl.single.object.company">

Когда пользователь меняет компанию, необходимо выбрать новые свойства, чтобы пользователь мог установить эти свойства.

function FooController($ngRedux, FooActions, BarActions) {
    this.$onInit = function () {
        this.unsubscribeCompanies = $ngRedux.connect(this.mapStateToThis, BarActions)(this);
        this.fetchCompanyList();
    };

    this.$onDestroy = function () {
        this.unsubscribeCompanies();
    };

    this.fetchCompanyList = function () {
        this.fetchCompanies().payload.then((response) => {
            this.fetchCompaniesSuccess(response.data);
        }, (error) => {
            this.fetchCompaniesError(error.data);
        });
    };

    this.getProperties = function () {
        this.fetchCompanyProperties(this.single.object.company).payload.then((response) => {
            this.fetchCompanyPropertiesSuccess(response.data);
        }, (error) => {
            this.fetchCompanyPropertiesError(error.data);
        });
    };

    this.mapStateToThis = function (state) {
        return {
            list: state.bar.list,
            single: state.bar.single
        };
    };
}

module.exports = {
    template: require('./index.html'),
    controller: ['$ngRedux', 'FooActions', 'BarActions', FooController]
}

Проблема, которую я получаю, состоит в том, что имя и выбранная компания перезаписываются пустыми значениями, когда выборка для свойств успешна. Я понимаю, почему значения перезаписываются пустыми значениями, и я нашел способ заставить его работать.

export const GET_COMPANIES = 'GET_COMPANIES';
export const GET_COMPANIES_SUCCESS = 'GET_COMPANIES_SUCCESS';
export const GET_COMPANIES_ERROR = 'GET_COMPANIES_ERROR';
export const GET_COMPANIES_PROPERTIES = 'GET_COMPANIES_PROPERTIES';
export const GET_COMPANIES_PROPERTIES_SUCCESS = 'GET_COMPANIES_PROPERTIES_SUCCESS';
export const GET_COMPANIES_PROPERTIES_ERROR = 'GET_COMPANIES_PROPERTIES_ERROR';

export default function BarActions($http) {
    function fetchCompanies() {
        return {
            type: GET_COMPANIES,
            payload: $http.get('api/companies')
        };
    }

    function fetchCompaniesSuccess(companies) {
        return {
            type: GET_COMPANIES_SUCCESS,
            payload: companies
        };
    }

    function fetchCompaniesError(error) {
        return {
            type: GET_COMPANIES_ERROR,
            payload: error
        };
    }
    function fetchCompanyProperties(company) {
        return {
            type: GET_COMPANIES_PROPERTIES,
            payload: $http.get(`api/company/${company}/properties`)
        };
    }

    function fetchCompanyPropertiesSuccess(properties) {
        return {
            type: GET_COMPANIES_PROPERTIES_SUCCESS,
            payload: properties
        };
    }

    function fetchCompanyPropertiesError(error) {
        return {
            type: GET_COMPANIES_PROPERTIES_ERROR,
            payload: error
        };
    }

    return {
        fetchCompanies,
        fetchCompaniesSuccess,
        fetchCompaniesError,
        fetchCompanyProperties,
        fetchCompanyPropertiesSuccess,
        fetchCompanyPropertiesError
    }
}

Я перезаписываю значения в редукторе следующим образом:

import { GET_COMPANIES, GET_COMPANIES_SUCCESS, GET_COMPANIES_ERROR, GET_COMPANIES_PROPERTIES, GET_COMPANIES_PROPERTIES_ERROR, GET_COMPANIES_PROPERTIES_SUCCESS } from "../actions/bar.actions";

const all = [];

const initialState = {
    list: {
        all,
        filtered: all,
        error: null,
        loading: false
    },
    single: {
        object: {},
        error: null,
        loading: false
    }
};

export function BarReducer(state = initialState, action) {
    switch (action.type) {
        case GET_COMPANIES:
            return { ...state, list: { all: [], filtered: [], error: null, loading: true } };
        case GET_COMPANIES_SUCCESS:
            return { ...state, list: { all: action.payload, filtered: action.payload, error: null, loading: false } };
        case GET_COMPANIES_ERROR:
            return { ...state, list: { all: [], filtered: [], error: action.payload.innerException, loading: false } };
        case GET_COMPANIES_PROPERTIES:
            return { ...state, single: { ...state.single, object: { ...state.single.object }, error: null, loading: true } };
        case GET_COMPANIES_PROPERTIES_SUCCESS:
            return { ...state, single: { ...state.single, object: { ...state.single.object, payloadValues: action.payload }, error: null, loading: false } };
        case GET_COMPANIES_PROPERTIES_ERROR:
            return { ...state, single: { object: null, error: action.payload.innerException, loading: false } };
        default:
            return state;
    }
}

То, как я сейчас использую оператор распространения, чтобы перезаписать старое состояние, выглядит грязным. Мне было интересно, есть ли какие-либо правила или руководящие принципы для решения этой проблемы. До сих пор я некоторое время искал в Интернете и, в частности, на сайте Redux, но я не встречал никаких других решений.

Answer 1

Поломка, вероятно, связана со структурой редуктора. Он связан со слишком многими различными частями состояния и должен работать с глубоко вложенными объектами, что облегчает случайное изменение состояния. Рекомендации по структуре редуктора гласят, что лучше всего разделить состояние редуктора на нормализованные срезы.

Попробуйте разделить один редуктор на несколько меньших. Например:

export const all = (initialAll = [], { type, companies }) => {
    switch(type) {
        case GET_COMPANIES_SUCCESS: return companies;
        default: return initialAll;
    }
}

export const error = (initialError = '', { type, error }) => {
    switch(type) {
        case GET_COMPANIES_ERROR: return error;
        default: return initialError;
    }
}

export const isFetching = (isFetching = false, { type }) => {
    switch(type) {
        case GET_COMPANIES: return true;
        case GET_COMPANIES_SUCCESS: return false;
        case GET_COMPANIES_ERROR: return false;
        default: return isFetching;
    }
}

Затем составьте их в один редуктор:

import { combineReducers } from 'redux';

export list = combineReducers({
    all,
    error,
    isFetching
});

// ...
export rootReducer = combineReducers({
    list,
    single,
    // ...
})

Таким образом, каждый редуктор имеет дело только с одной вещью или набором вещей, и его обработчики редукции могут выполнять простые операции в одноуровневом состоянии вместо сложных операций в глубоко вложенном состоянии.

Кроме того, в вашем list подсостояние, похоже, вы храните один и тот же тип ресурсов сбора в обоих all а также filtered с потенциальным перекрытием. Это приводит к нескольким источникам правды для одних и тех же данных, что открывает путь к несогласованности данных. Вместо этого сохраните массив FilterIds:

export const filteredIds = (initialIds = [], { type, filteredIds }) => {
    switch(type) {
        case SET_FILTERED_IDS: return filteredIds;
        default: return initialIds;
    }
}

Затем используйте селектор, который фильтрует all посредством filteredIds чтобы получить ваши фильтрованные элементы.

Answer 2

Один из вариантов - использовать Immutable, который изменит ваши редукторы на:

case GET_COMPANIES:
    return state.setIn(['list', 'loading'], true);
// etc

Посмотрите Используя Immutable.JS с Redux для получения дополнительной информации об этом подходе.

Другой вариант - использовать Lodash, как показано в этом выпуске, вы можете определить следующую функцию, чтобы сделать ее похожей на неизменяемую:

import {clone, setWith, curry} from 'lodash/fp';

export const setIn = curry((path, value, obj) =>
  setWith(clone, path, value, clone(obj)),
);

Тогда вы можете использовать setIn следующим образом:

case GET_COMPANIES:
    return setIn(['list', 'loading'], true, state);
// etc

Подход Lodash просто работает с простым объектом, поэтому его легче понять, чем неизменный.