Функциональный компонент без сохранения состояния (SFC) в React не отвечает на запросы от Redux

Question

У меня есть SFC это не отражает изменения в Redux хранить. Редуктор получает удар по событию onClick, но SFC не обновляет Пожалуйста, не думайте, что я что-то знаю. Я все еще новичок с React стек и, вероятно, делаю глупую ошибку. Я подключен к магазину, так почему компонент не обновляется? Я думал, что реквизит будет передан.

SFC

const Dogs = props => (
  <div>
    <Button variant="contained" onClick={() => props.dispatch(fetchDog())}>
      Show Dog
    </Button>
    {props.loading ? ( // <<< PROPS ARE ALWAYS UNDEFINED
      <p>Loading...</p>
    ) : props.error ? (
      <p>Error, try again</p>
    ) : (
      <p>
        <img src={props.url} />
      </p>
    )}
  </div>
);

const mapStateToProps = state => ({
  url: state.url,
  loading: state.loading,
  error: state.error
});

export default connect(mapStateToProps)(Dogs);

редуктор

import {
  REQUESTED_DOG,
  REQUESTED_DOG_SUCCEEDED,
  REQUESTED_DOG_FAILED
} from "../actions/index";

// Reducer
const initialState = {
  url: "",
  loading: false,
  error: false
};
const dog = (state = initialState, action) => {
  switch (action.type) {
    case REQUESTED_DOG:
      return {
        url: "",
        loading: true,
        error: false
      };
    case REQUESTED_DOG_SUCCEEDED: // <<< WORKS AS INTENDED!
      return {
        url: action.url,
        loading: false,
        error: false
      };
    case REQUESTED_DOG_FAILED:
      return {
        url: "",
        loading: false,
        error: true
      };
    default:
      return state;
  }
};

export default dog;

Маршрутизация / ссылки

const Root = ({ store }) => (
  <Provider store={store}>
   ...
    <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/dogs" component={Dogs} />
              {/* <Route
                path="/dogs"
                render={props => (
                  <Dogs
                    url={props.url}
                    error={props.error}
                    loading={props.loading}
                    {...props}
                  />
                )}
              /> */}

хранить

import { createStore, applyMiddleware, compose } from "redux";
import { createLogger } from "redux-logger";
import rootReducer from "../reducers";
import DevTools from "../containers/DevTools";
import createSagaMiddleware from "redux-saga";
import { watchFetchDog } from "../sagas/dogSaga";

const logger = createLogger({
  duration: true
});

const sagaMiddleware = createSagaMiddleware();

const configureStore = preloadedState => {
  const store = createStore(
    rootReducer,
    preloadedState,
    compose(
      applyMiddleware(sagaMiddleware, logger), // logger must be the last middleware in chain
      DevTools.instrument()
    )
  );

  sagaMiddleware.run(watchFetchDog);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept("../reducers", () => {
      store.replaceReducer(rootReducer);
    });
  }
  return store;
};

export default configureStore;

Корень Редуктор

import { combineReducers } from "redux";
import agents from "./agents";
import visibilityFilter from "./visibilityFilter";
import theme from "./theme";
import dog from "../reducers/dog";

const rootReducer = combineReducers({
  agents,
  visibilityFilter,
  theme,
  dog
});

export default rootReducer;

Answer 1

Вы, вероятно, используете свой mapStateToProps функционировать неправильно. У вас, скорее всего, есть собачье состояние в вашем глобальном. Итак, это должно быть что-то вроде этого:

const mapStateToProps = state => ({
  url: state.dog.url,
  loading: state.dog.loading,
  error: state.dog.error
});

Обновление после комментариев

Да, это прекрасный и стандартный способ открытия вашего состояния или состояний для вашего компонента. Поскольку в вашем магазине нет ни одного состояния, вам следует использовать именно это состояние.

Прямо сейчас у вас есть глобальный state в вашем магазине, и есть несколько состояний, которые вы объединяете, как dogи т.д. в этом глобальном state