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

Всем доброго дня.
Хочу разобраться с библиотекой 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?
  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега Redux
Frontend Developer
Можно использовать bindActionCreators или собственную обертку над вызовом store.dispatch и импортировать в модули уже подключенные к store действия.
export const addTrack = (track) => store.dispatch({ type: ADD_TRACK, payload: { track } });

Для асинхронных запросов, можно использовать redux-thunk.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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