Question

我有一个SFC，没有反映出Redux存储区中的更改。减速器在 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;

路由/链接

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;

Root Reducer

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

您可能错误地使用了[5, 1]函数。您最有可能在全局环境中拥有一种狗状态。因此，一定是这样的：

max([5, 1])

评论后更新

是的，这是打开状态或组件状态的一种很好的标准方法。由于商店中没有单一状态，因此应在此处专门使用所需的状态。

现在您的商店中有一个全局mapStateToProps，并且在此全局const mapStateToProps = state => ({ url: state.dog.url, loading: state.dog.loading, error: state.dog.error });中有多个要合并的状态，例如state等

React中的无状态功能组件（SFC）无法响应Redux的道具

1 个答案: