React 中的无状态功能组件 (SFC) 不响应来自 Redux 的道具

Question

我有一个 SFC 没有反映 Redux 商店中的变化。 reducer 在 onClick 事件中被触发，但是 SFC 没有更新。请不要以为我什么都知道。我仍然是 React 堆栈的新手，可能犯了一个愚蠢的错误。我已连接到商店，为什么组件不更新？还以为道具会传进来

证监会

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;

Routing/links

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

中等等

React 中的无状态功能组件 (SFC) 不响应来自 Redux 的道具

Stateless Functional Component (SFC) in React not responding to props from Redux

reactjs

react-redux

react-router-v4