@justadumb

Есть ли способ разделить действия и привязать их к определенным редьюсерам?

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

У меня есть несколько редьюсеров собранных вместе с помощью combineReducers() и один большой ActionCreator.js со всеми действиями. Есть ли какая-нибудь хорошая практика разделения действий и связывание их с определенными редьюсерами? (в целях повышения производительности и улучшения читаемости)

//reducer.js:
    
    import { combineReducers } from 'redux';
    import { authReducer} from './authReducer';
    import { modalHandler } from './modalHandler';
    import { rootReducer } from './rootReducer';
    import { errorHandler } from './errorHandler';
    
    const reducer = combineReducers({ authReducer, modalHandler, rootReducer, errorHandler });
    
    export default reducer;
    
    
    //ActionCreator.js:
    
    export const newMessage = (id, mess)=> {
      return dispatch => {
        return axios.post('/api/channel/newMessage', {id, mess})
          .then(res => {
            dispatch(getChannelData());
          })
          .catch(err => {
            dispatch(requestError(err));
          });
      };
    };
    
    export const channelLogoUpload = formData => {
      return dispatch => {
        return axios.post('/api/uploads/newChannel/logo', formData)
          .then(res => {
            console.log(res.data.url)
            dispatch(newLogo(res.data.url))
          })
          .catch(err => dispatch(requestError(err)));
      }
    }
    
    export const userRegistration = user => {
      console.log(user);
      return dispatch => {
        return axios.post('/api/signup', { user })
          .then(res => {
            if (res.status === 200) {
              dispatch(newUser(true));
            }
          })
          .catch(err => {
            if (err) {
              dispatch(registrationError(err.response.data.message));
            }
          })
      }
    }
    
    export const imageIncrease = (value, title) => ({
      type: IMAGE_INCREASE,
      value,
      title
    });
    
    export const logOut = () => ({
      type: LOG_OUT
    });
    
    //...etc
    
    
    // хотелось бы получить что-то подобное:
     
    const combineReducers({
       authActions: authReducer,
       modalActions: modalHandler,
      //...etc
    })
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега Redux
Frontend Developer
Стандартной практикой является создать директорию actions и хранить действия в одноименных c редьюсерами файлах. Пример:
5d338c9d40026982594687.png

хотелось бы получить что-то подобное

Какая-то ерунда. Смешали действия и combineReducers, какого эффекта при этом пытаетесь добиться непонятно.

Советую использовать библиотеку redux-act. Сокращает бойлерплейт.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Санкт-Петербург
от 160 000 до 220 000 ₽