Повторная визуализация компонента после отправки действия из некомпонентного файла JS - PullRequest
Новая
       12

Повторная визуализация компонента после отправки действия из некомпонентного файла JS

0 голосов
/ 07 июня 2019

Я отправляю действие из некомпонентного файла JS (utils / index.js) с помощью store.dispatch (), но после изменения состояния редуктора компонент, в котором это состояние редуктора связано с использованием mapStateToProps, не является перерисовывается,

Что я делаю не так?

Любая помощь будет оценена


Заранее спасибо


Я попытался выполнить поиск, и перешел ко всем вопросам и статьям, в которых описывается действие из файла компонента.


Все связанные файлы

/ магазин / index.js 


import { createStore } from "redux";
import rootReducer from "reducers";

store = createStore(rootReducer);

/ Utils / index.js 

import store from './store';
import { toggleShowAlert } from "reducers/alert";

export const customAlert = msg => {
    store.dispatch(toggleShowAlert(msg));
}

/ вид / Nav / index.js 

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Nav extends Component {
    render() {
        ....
        // component code
        ....
    }
}

const mapStateToProps = state => {
    return {
        showAlert: state.alert.showAlert
    }
}

export default connect(mapStateToProps)(Nav);

/ редуктор / alert.js 

const TOGGLE_SHOW_ALERT = "TOGGLE_SHOW_ALERT";

export const toggleShowAlert = msg => {
    return dispatch => {
        dispatch({
            type: TOGGLE_SHOW_ALERT,
            msg
        });
    };
};

const initialState = {
    showAlert: false,
    alertMsg: ""
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case TOGGLE_SHOW_ALERT:
            return {
                ...state,
                showAlert: !state.showAlert,
                alertMsg: state.showAlert ? "" : action.msg
            };
        default:
            return { ...state };
    }
}

export default reducer;

другой редуктор, из которого вызывается этот customAlert / редукторы / user.js 

import { customAlert } from 'utils';

...other codes...

export const updateAgeGender = (userId, age, gender) => {
    return dispatch => {
        dispatch(updateButtonLoading());
        callAPI("post", `${COMM_BE_URL}/users/update-age-gender`, {
            userId,
            age,
            gender
        })
        .then(res => {
            if (res.status === "SUCCESS") {
                dispatch(updateAgeGenderAction(age, gender));
                customAlert("Your info has been updated, now u can join");
            }
        })
        .catch(err => {
            console.log(err);
            dispatch(updateError(SERVER_ERROR_MSG));
        });
    };
};

После изменения showAlert компонент Nav должен выполнить повторную визуализацию, но этого не происходит

...