主页 / 问题 / 1075565
Accepted
Nick
Asked:2020-01-29 02:14:24 +0000 UTC2020-01-29 02:14:24 +0000 UTC

React + Redux为什么在更新商店时不更新元素

  • 772

我试图让它在从服务器接收数据后，自动更新组件。查到connect()函数的信息，redux-logger显示reducer在工作，redux-devtools显示store正在更新，但是组件的props没有变化，分别是组件没有重绘。如何正确订阅组件以存储更改。

我这样创建存储库：

import {applyMiddleware, createStore} from "redux";
import {logger} from "redux-logger";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";

import reducers from "./reducers/combineReducer";

const middlewares = applyMiddleware(promise, thunk, logger);

export default createStore(reducers, middlewares);

应用：

import React from "react";
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import store from "../store";
//import ...

ReactDOM.render (
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Layout} />
        // прочие страницы
      </Switch>
    </BrowserRouter>
 </Provider>, document.querySelector ("#root"));

实际组件：

import React from "react";
import { connect } from 'react-redux';

class Layout extends React.Component {
  render() {
    return (
      <div className="container">
        // разметка
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    data: state.data,
    page: state.page,
    fetching: state.fetching,
    fetched: state.fetched,
    error: state.error,
  };
}

export default connect(mapStateToProps)(Layout);
javascript

1 个回答

  1. Best Answer

    明白了。原因是出乎意料的地方，即在

    import reducers from "./reducers/combineReducer"

    一个更复杂的数据结构进入存储，即

    export default combineReducers({
  data: fetchDataReducer
})

    需要更正

    function mapStateToProps(state) {
  return {
    data: state.data.data,
    page: state.data.page,
    fetching: state.data.fetching,
    fetched: state.data.fetched,
    error: state.data.error,
  };
}

    组件最初面向的字段始终保留undefined，因此组件没有更新。

    • 0

相关问题