Began to learn Redux and applyMiddleware. I tried to write my own simple program. And I got an error, in the logs it says that the json data doesn't reach my container component, i.e. undefined. Maybe I missed something elementary.

index.js:

import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import thunk from 'redux-thunk'; import reducer from './reducers/index'; import App from "./components/App"; const store = createStore( reducer, applyMiddleware(thunk) ) console.log(store.getState()) // тут выводит только пустой объект store.subscribe(() => { console.log('store updated', store.getState()); // обновлений стора нет, в консоль ничего не выводит }); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )

action:

 export const REQUEST_DATA = 'REQUEST_DATA'; export const RECEIVE_DATA = 'RECEIVE_DATA'; export const requestData = () => ({ type: REQUEST_DATA, }); export const receivedData = json => ({ type: RECEIVE_DATA, json: json, }); export function fetchPosts() { return function (dispatch) { dispatch(requestData()); return fetch(`http://www.json-generator.com/api/json/get/ceRHciXcVu?indent=2`) .then( response => response.json(), error => console.log('An error occurred.', error), ) .then((json) => { dispatch(receivedData(json)); }, ); }; }

reducer:

 import { REQUEST_DATA, RECEIVE_DATA } from '../actions/index'; const reducer = (state = {}, action) => { switch (action.type) { case REQUEST_DATA: return { ...state, loading: true }; case RECEIVE_DATA: return { ...state, json: action.json }; default: return state; } }; export default reducer;

container:

 import React from 'react'; import { connect } from 'react-redux' let App = ({filteredArr}) => { console.log({filteredArr}); // получаю undefined return( <p>test</p> ) }; const mapStateToProps = (state) => ({ filteredArr: state.json }) App = connect( mapStateToProps, null )(App) export default App;

  • one
    You don't call fetchPosts anywhere ... - user220409
  • Thank. Indeed, the code was valid, just nowhere was the fetchPosts call. I added a button to the component, fetchPosts hooked on it and the story began to update. - Andrey Green
  • one
    With this formulation (this is the correct formulation) you need to use the latest version of the reactor together with useRedux from react-redux and fetchPosts to call useEffect in the hook, approximately like useEffect (fetchPosts, []) - user220409

0