part of App.js

import { createStore } from 'redux';
import { Provider,useDispatch,useSelector } from 'react-redux';
import reducers from './reducers';
import * as actions from './actions';
const store = createStore(reducers);

const App = () => {
  return(
    <Provider store={store}>
        <MyComponent>
    </Provider>
  );
};

//----------------------

part of my component

const dispatch = useDispatch()

dispatch(actions.addPost(text));

//------------------

actions - index.js
export const addPost = (text) => ({
   type : 'ADD',
   text
});

//----------------- reducers - index.js

const initialState = {
   posts : [],
};

const posts = (state=initialState,action) => {
const {posts}= state;
switch(action.type){
   case 'ADD':
       return({
           posts: [
               {
               idx : Math.random(),
               userIdx: 'user123',
               text: actions.text
               },
               ...posts,
           ]
       });
};
};

export default posts;

//------------------------------

i declare addPost in index.js in actions folder and export it but when i use it, error has been occurred and it said "TypeError: actions.addPost is not a function. (In 'actions.addPost(text)', 'actions.addPost' is undefined)"

Why my components can't recognize actions? Is there anything i should add? this is my project folder structure. enter image description here