РЕАГИРОВАТЬ получать данные из nodeJS crud с использованием приставки

Question

У меня есть экспресс-приложение, подключенное для взаимодействия с прокси-сервером. Мне уже удалось отобразить мои данные в режиме реагирования, но теперь я хочу сделать это в избыточном количестве:

Есть проблема, я установил всередукторы / действие и хранение, но я не увидел никаких данных на своей странице

Мой код:

Действие:

export const api = ext => `http://localhost:8080/${ext}`;

//
// ─── ACTION TYPES ───────────────────────────────────────────────────────────────
//

export const GET_ADVERTS = "GET_ADVERTS";
export const GET_ADVERT = "GET_ADVERT";

//
// ─── ACTION CREATORS ────────────────────────────────────────────────────────────
//

export function getAdverts() {
  return dispatch => {
    fetch("/adverts")
      .then(res => res.json())
      .then(payload => {
        dispatch({ type: GET_ADVERTS, payload });
      });
  };
}

export function getAdvert(id) {
  return dispatch => {
    fetch(`/adverts/${id}`)
      .then(res => res.json())
      .then(payload => {
        dispatch({ type: GET_ADVERT, payload });
      });
  };
}

Редуктор:

import { combineReducers } from "redux";
import { GET_ADVERTS, GET_ADVERT } from "../actions/actions";
const INITIAL_STATE = {
  adverts: [],
  advert: {}
};

function todos(state = INITIAL_STATE, action) {
  switch (action.type) {
    case GET_ADVERTS:
      return { ...state, adverts: action.payload };
    case GET_ADVERT:
      return { advert: action.payload };
    default:
      return state;
  }
}

const todoApp = combineReducers({
  todos
});

export default todoApp;

index.js

//imports...

const store = createStore(todoApp, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,

  document.getElementById("app")
);

Моя страница списка объявлений:

//imports..

class Adverts extends Component {


  componentDidMount() {
    this.props.getAdverts();
  }

  render() {
    const { adverts = [] } = this.props;

    return (
      <div>
        <Header />
        <h1>Adverts</h1>
        {adverts.map(advert => (
          <li key={advert._id}>
            <a href={"adverts/" + advert._id}>
              {advert.name} {advert.surname}
            </a>
          </li>
        ))}

        <Footer />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  adverts: state.adverts
});

export default connect(
  mapStateToProps,
  { getAdverts }
)(Adverts);

Спасибо:)

Answer 1

на нужной вам странице вы должны иметь, например,

  import React , {Component} from 'react'
  import { connect }from 'react-redux'
  import { getAdvert } from '...action.js'

  class example  extends Component{

componentWillMount(){
  this.props.getAdvert()
}
    render(){
      return(
<div>
hello
</div>
      )
    }
  }
const mapStateToProps = ({}) => {
    return{}
  }
  export default connect (mapStateToProps,{getAdvert})(example)

в mapstatetoprops, вы возвращаете свои значения из redux