Redux отправляет данные из компонента

Question

Как правильно использовать функцию mapdispatchtoprops для отправки на редуктор? Сначала я получаю данные с сервера и хочу отправить эти данные в редуктор. Функция firebaseChatData не может быть передана в mapdispatchtoprops, поскольку она находится внутри компонента

Сообщения. js

const MessageUiBody = ( { messages, loading } ) => {

    const userData = JSON.parse(localStorage.getItem("user-data"));

    useEffect( () => {

        const firebaseChatData = () => (dispatch) => {
            firebaseDB.ref().child(API.firebaseEnv + "/messages/messageItem" + userData.account_id)
                .on("value", snap => {
                    const firebaseChat = snap.val();
                    // console.log(firebaseChat)
                    dispatch(firebaseChatAction(firebaseChat))
                });
        };
    }, []);


  return(

      <div> // code </div>
  );
};


//Action
const firebaseChatAction = (firebaseChat) => ({
    type: 'FIREBASE_MESSAGE',
    firebaseChat
});

const mapDispatchToProps = (dispatch) => {
    return {
        data : () => {
            dispatch(firebaseChatData())
        }
    }
};


export default connect(null, mapDispatchToProps)(MessageUiBody)

Редуктор

export default function messages ( state = [], action = {}) {
    switch (action.type) {
        case 'FIREBASE_MESSAGE' :
            state.data.messages.push(action.firebaseChat);
            return {
                ...state
            };
        default:
            return state
    }
}

Answer 1

Вам придется изменить свой код, потому что вы определяете данные как функцию поддержки, которая будет отправлять ваше действие:

const mapDispatchToProps = dispatch => {
 return {
  data: (result) => dispatch(firebaseChatAction(result)),
 }
}

После этого измените строку после консоли, войдите в свое обещание и используйте опору данных, которую вы определили в функции mapDispatch:

const MessageUiBody = ( { data, messages, loading } ) => {

const userData = JSON.parse(localStorage.getItem("user-data"));

useEffect( () => {

    const firebaseChatData = () => (dispatch) => {
        firebaseDB.ref().child(API.firebaseEnv + "/messages/messageItem" + userData.account_id)
            .on("value", snap => {
                const firebaseChat = snap.val();
                // here you call the data that will dispatch the firebaseChatAction
                data(firebaseChat)
            });
    };
}, []);


return(

  <div> // code </div>
);
};

Также стоит отметить, что вам не нужно собирать элементы sh в вашем состоянии, вы не можете изменить текущее состояние , поэтому всегда старайтесь генерировать новые элементы вместо того, чтобы изменять существующий, что-то вроде этого:

export default function messages ( state = [], action = {}) {
 switch (action.type) {
    case 'FIREBASE_MESSAGE' :
        return {
            ...state,
            data: {
             ...state.data,
             messages: [...state.data.messages, action.firebaseChat]
            }
        };
    default:
        return state
 }
}

С помощью оператора распространения вы возвращаете новый массив, который содержит исходный массив state.data.messages и будет также добавьте элемент firebaseChat.