CODEWITHSUNDEEP
reactjsredux
stepbystep
stepbystep

Reputation: 391

Redux dispatch data from component

How can I use the mapdispatchtoprops function correctly to dispatch to reducer? First, I get data from the server and want to send this data to the reducer. firebaseChatData function cannot be transferred to the mapdispatchtoprops because it is inside the component

Messages.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)

Reducer

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

Upvotes: 0

Views: 61

Answers (1)

jean182
jean182

Reputation: 3505

You'll have to change your code, because you're defining data as the prop function that will dispatch your action:

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

After that change the line after the console log in your promise and use the data prop that you defined in your mapDispatch function:

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>
);
};

Also is worth to notice that you don't have to push items in your state, you can't mutate the current state, so always try to generate new items instead of modifying the existing one, something like this:

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
 }
}

With the spread operator you are returning a new array that contains the original state.data.messages array and will add the firebaseChat item as well.

Upvotes: 1

Related Questions