javascript - Unable to dispatch state values from redux store

Question

I am new to react and redux and trying to dispatch states from store but unable to do so, Please anyone help me to resolve the problem...

App.js

import React from "react";
import store from './reduxStore/store';
import { Provider } from 'react-redux';
import Sidebar from './Sidebar';


function App() {

  return (
    <div>
      <Provider store={store}>
         <Sidebar ></Sidebar>
      </Provider>
    </div>
  );
}



export default (App);

This is my sidebar.js Component

import React, { useEffect } from 'react';
import { updatePageLinkActions } from "../../reduxStore/actions/updatePageLinkActions";
import { connect } from "react-redux";



const Sidebar = () =>{

useEffect(() => {
    return updatePageLinkActions
}, [])


    return (
        <>
            <ListItem button onClick={updatePageLinkActions}>
                <ListItemIcon><Home></Home></ListItemIcon>
                <ListItemText primary="Dashboard" />
            </ListItem>
            <ListItem button onClick={() => handleOpenPage("contact")}>
                <ListItemIcon><AcUnit></AcUnit></ListItemIcon>
                <ListItemText primary="Contact" />
            </ListItem>
        </>
        
    )
}

const mapStateToProps = (state) => ({
    updatePage: state.updatePage.pgLink
})

export default connect(mapStateToProps, { updatePageLinkActions })(SidebarItems);

Store Store.js

import { createStore, applyMiddleware, compose } from "redux";
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};
const middleWare = [thunk]

const store = createStore(
  rootReducer, 
  initialState, 
  compose(
    applyMiddleware(...middleWare),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  )
) 

export default store;

Root Reducer rootReducer.js

import { combineReducers } from 'redux';
import updatePageLinkReducer from './updatePageLinRreducer';

export default combineReducers({
    updatePage: updatePageLinkReducer
});

Action updatePageLinkActions.js

import { UPDATE_PAGE_LINK } from "../actionTypes";
//import store from "../store";

export const updatePageLinkActions = dispatch => {

  console.log("actions log ", dispatch.payload)

  return dispatch({
      type: UPDATE_PAGE_LINK,
      payload: {pageLink : "Action_pageLink" }
    })        
};

Reducer updatePageLinkReducer.js

import { UPDATE_PAGE_LINK } from '../actionTypes';

const initialState = {
  pgLink: []
};

// eslint-disable-next-line import/no-anonymous-default-export
export default function(state = initialState, action) {
  switch (action.type) {
    case UPDATE_PAGE_LINK:
      console.log("Action called ")
      return { ...state, pgLink: action.payload }
    default:
      return state;
  }
}

I am unable to dispatch values from store, Please somebody help me...

Answer 1

Your action creator is not defined properly.

It should be this:

export const updatePageLinkActions = () => dispatch => {

  console.log("actions log ", dispatch.payload)

  return dispatch({
      type: UPDATE_PAGE_LINK,
      payload: {pageLink : "Action_pageLink" }
    })        
};