parte de 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> ); };//-------------------------------------
parte de mi componente
const dispatch = useDispatch() dispatch(actions.addPost(text));//------------------
actions - index.js export const addPost = (text) => ({ type : 'ADD', text });//----------------- reductores - 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;//------------------------------
declaro addPost en index.js en la carpeta de acciones y lo exporto, pero cuando lo uso, se ha producido un error y dice "TypeError: actions.addPost is not a function. (En 'actions.addPost(text)', 'actions .addPost' no está definido)"
¿Por qué mis componentes no pueden reconocer acciones? ¿Hay algo que deba agregar? esta es la estructura de carpetas de mi proyecto. ingrese la descripción de la imagen aquí