Как правильно изменять store в redux?

Question

[Юра Комаров]

Всем доброго дня.
Пытаюсь написать приложение с использованием redux без react.
И у меня возник вопрос.
У меня есть родительский класс в котором я создаю store

this.store = createStore(
    reducer(),
    composeWithDevTools(applyMiddleware(...[thunk])),
);

И есть 3 класса которые унаследуются от этого класса

Как я создаю reducers

import {combineReducers} from 'redux';
import priceColor from './color-scheme';
import includeMosquitoInPrice from './includeMosquitoInPrice';
import mosquitos from './masquitos';

export default () =>
  combineReducers({
    priceColor,
    includeMosquitoInPrice,
    mosquitos,
  });

Сами reducers

import AppConstants from '../actionTypes';

const initialState = {};

export default (state = initialState, {type, payload}) => {
  switch (type) {
    case AppConstants.ADD_MOSQUITO:
      return {...state, ...payload};
    case AppConstants.REMOVE_MOSQUITO:
      delete state[Object.keys(payload)];
      return state;
    default:
      return state;
  }
};

import AppConstants from '../actionTypes';

const initialState = {sill: 0, otkos: 0};

export default (state = initialState, {type, payload}) => {
  switch (type) {
    case AppConstants.GET_COLOR_PRICE_OTKOS:
      return {...state, otkos: payload};
    case AppConstants.GET_COLOR_PRICE_SILL:
      return {...state, sill: payload};
    default:
      return state;
  }
};

Экшены которые вызывают dispatch (лежат в отдельном файле)

export const getPriceColor = obj => dispatch => {
  const res = getPriceColorApi(obj);
  dispatch({
    type: obj.name,
    payload: res,
  });
};
export const mosquitoNet = obj => dispatch => {
  dispatch({
    type: obj.name,
    payload: obj.options,
  });
};

И их я вызываю в разных классах
getPriceColor(this.options)(dispatch);
и в другом классе

mosquitoNet({
    name: !$stvorkaBox.hasClass('is-mosquito-grid')
        ? AppConstants.ADD_MOSQUITO
        : AppConstants.REMOVE_MOSQUITO,
    options: {
        [mosquitoId]: {type: 'standart'},
     },
 })(dispatch);

Все работает и state меняется, но вот одна проблема, когда я меняю state вызывая функцию mosquitoNet то type экшена (например ADD_MOSQUITO ) приходит во все reducers и все остальные свойства state возвращаются в исходное состояние. (т.к. во всех reducer(ax) есть default: retur state )
Как можно избежать этого, ну то есть, если вызвали функцию обновления state в одном классе то и сработать должен только тот dispatch который я вызываю в этом классе.

Answer 1

[Антон Спирин]

И есть 3 класса которые унаследуются от этого класса

В каждом экземпляре у вас создается своя копия хранилища. Зачем?

Вот этот код некорректный:

export const getPriceColor = obj => dispatch => {
  const res = getPriceColorApi(obj);
  dispatch({
    type: obj.name,
    payload: res,
  });
};

Вы не дожидаетесь ответа сервера.

Все работает и state меняется, но вот одна проблема, когда я меняю state вызывая функцию mosquitoNet то type экшена (например ADD_MOSQUITO ) приходит во все reducers и все остальные свойства state возвращаются в исходное состояние.

ADD_MOSQUITO в вашем коде не сбрасывает состояние.

Кейс:

default:
  return state;

возвращает текущее состояние.

Как можно избежать этого

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

Comments

[Юра Комаров]

Спасибо за ответ, но все таки как нужно сделать правильно.

export const getPriceColor = obj => dispatch => {
  const res = getPriceColorApi(obj);
  dispatch({
    type: obj.name,
    payload: res,
  });
};

В этом месте у меня заглушка стоит. Я знаю что нужно писать async await и так далее. Просто оставил себе для подсказки, что здесь нужно будет писать запрос к db. Сейчас тут обычная функция которая просто возвращает res.

Подскажите, почему у меня несколько копий состояния.

И вызов

mosquitoNet({
				name: !$stvorkaBox.hasClass('is-mosquito-grid')
					? AppConstants.ADD_MOSQUITO
					: AppConstants.REMOVE_MOSQUITO,
				options: {
					[mosquitoId]: {type: 'standart'},
				},
			})(this.dispatch);

export default (state = initialState, {type, payload}) => {
	console.log('mosquito ', type);
	switch (type) {
		case AppConstants.ADD_MOSQUITO:
			return {...state, ...payload};
		case AppConstants.REMOVE_MOSQUITO:
			delete state[Object.keys(payload)];
			return state;
		default:
			return state;
	}
};

в консоле все как и задумывалось mosquito ADD_MOSQUITO

[Юра Комаров]

Состояния сбрасываются потому что ADD_MOSQUITO приходит во все reducers , a так как в каждом есть default return state то и на выходе остается только то что попало под case ADD_MOSQUITO , остальные переписываются в дефолтные

[Антон Спирин]

Юра Комаров,

Состояния сбрасываются потому что ADD_MOSQUITO приходит во все reducers , a так как в каждом есть default return state то и на выходе остается только то что попало под case ADD_MOSQUITO , остальные переписываются в дефолтные

Повторюсь. Ничего не сбрасывается.
Действие и должно проходить по всем редьюсерам. В редьюсерах, в которых оно не обрабатывается возвращается не измененное состояние(не начальное).
Ищите ошибку там, где зачем-то создаете несколько копий хранилищ. Больше без остального кода тут не скажешь.

[Юра Комаров]

Извините что я вас достал с этим вопросом, но по моему я нашел решение.
1) я создал stor вне класса
2) В классе в конструкторе сделал ссылку на store

import {applyMiddleware, createStore} from 'redux';
import {composeWithDevTools} from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from '../reducers';

const store = createStore(
	reducer,
	composeWithDevTools(applyMiddleware(...[thunk])),
);

const priceSum = () => console.log(store.getState());
store.subscribe(() => {
	priceSum();
});

export class WindowCalculator {
	constructor() {
		this.$casement = $('.js-calculator-window');
		this.store = store;
	}

	priceSum() {
		console.log('sum ', this.store.getState());
	}

И теперь все работает как нужно. Помогла ваша подсказка, что я создал кучу экземпляров store