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

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;

减根器

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