Как использовать redux в разных классах js?

Question

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

Всем доброго дня.
Хочу разобраться с библиотекой redux.

Что я делаю
файл app.js

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

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

store.subscribe(() => {
	console.log('sub ', store.getState());
});

store.dispatch({type: 'ADD_TRACK', payload: 'Simple like spirit'});

файл index.js в папке reducers

import {combineReducers} from 'redux';
import user from './playList';

export default () =>
	combineReducers({
		user,
	});

файл playList.js в папке reducers

export default (state = [], action) => {
	if (action.type === 'ADD_TRACK') {
		return [...state, action.payload];
	}
	return state;
};

На данном этапе все хорошо и работает и даже можно что то написать вызывая store.dispatch и изменять этим store в файле app.js.
Но это все хорошо, но мне хочется что бы я store мог менять из любого класса моего приложения, то есть я сейчас создам класс, напишу в нем метод, по клику который должен бегать на сервер и получать данные.Далее подключу этот класс в app.js Но вот только не как не пойму, как в этом классе вызвать store.dispatch и кинуть в него эти данные.
Вопрос, как правильно подключить redux, что бы была возможность в разных классах использовать один store?

Comments

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

Возможно ли такое решение.
Класс color-scheme.js

export class ColorSheme {
	constructor(selector, store) {
		this.$select = $(selector);
		console.log('js');
		store.dispatch({
			type: 'ADD_TRACK',
			payload: 'Simple like spirit !!!!!!!!!!',
		});
	}
}

Файл app.js

import {ColorSheme} from '../blocks/calculator/color-scheme/color-scheme';

(() => new ColorSheme('.js-color-scheme', store))();

И тогда у меня отрабатывает store.subscribe и я получаю объект с двумя значениями.
Насколько такое решение правильно ?

Answer 1

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

Можно использовать bindActionCreators или собственную обертку над вызовом store.dispatch и импортировать в модули уже подключенные к store действия.

export const addTrack = (track) => store.dispatch({ type: ADD_TRACK, payload: { track } });

Для асинхронных запросов, можно использовать redux-thunk.

Comments

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

Здравствуйте еще раз. Извините можно еще один вопросик.
Я тут откладывал решение этой задачи, но сейчас опять к ней вернулся.
И у меня возник вопрос.
У меня есть родительский класс в котором я создаю 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 возвращаются в исходное состояние.
Как можно избежать этого, ну то есть если вызвали функцию обновления state в одном классе то и сработать должен только тот dispatch который я вызываю в этом классе.