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

Всем доброго дня.
Пытаюсь написать приложение с использованием 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 который я вызываю в этом классе.
  • Вопрос задан
  • 667 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега Redux
Frontend Developer
И есть 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;

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы